前言:关于Vue CLI版本介绍
关于旧版本
Vue CLI 的包名称由
vue-cli改成了@vue/cli。 如果你已经全局安装了旧版本的vue-cli(1.x 或 2.x)，你需要先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载它。
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
1. Vue CLI的了解
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.
1.1 Vue CLI 说明
-
CLI 全称就是 Command-Line Interface, 翻译为命令行界面,俗称脚手架
-
Vue CLI就是一个官网发布的vue.js项目的脚手
-
使用vue-cli可以帮我们快速的搭建Vue开发环境以及对应的webpack配置
用现实生活中的例子:
比如你要盖一栋大楼,大楼外侧的脚手架是必须要搭建的, 每一栋大楼都需要这些脚手架,这些脚手架如果每一次都需要一点一点搭建的话就会非常繁琐和耗时,如果,有人提前帮你把这些必要的脚手架搭建好了,你只需要注重点关注在大楼建设上就可以了
同样的,我们开发vue项目,需要一些诸如webpack这样的配置,如果每次都要自己从头处理就很繁琐,那么官方就帮我们把这些必要的配置好,生成了脚手架模板, 我们直接拿过来使用,这就是脚手架,在脚手架上直接搭建自己的项目,如果发现脚手架有些不能满足我们的需要,也可以自己手动修改脚手架配置
一言以蔽之: 脚手架就是搭建项目的基础模板
1.2 什么时候需要用到脚手架
如果你的项目比较简单,就是一些基本的将数据渲染到页面上,那么你不要Vue CLI脚手架
只有当你开发大型项目时,就必须要用到Vue CLI脚手架了
因为大型项目需要考虑代码目录结构,项目结构,部署以及热更新等很多琐碎的事情,那么这些事情都交给脚手架来配置好, 我们直接使用脚手架就可以了
2. 安装vue CLI
注意在安装Vue CLI是一定要提前安装node.
2.1 安装 Vue CLi
可以使用下列任一命令全局安装最新的CLI：
npm install -g @vue/cli
# or
yarn global add @vue/cli
安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
当然也可以通过版本好来验证是否安装成功
2.2 查看版本号命令
使用下面命令打印版本号.
> vue --version
> # or 简写
> vue -V
如果可以正常打印版本号说明vue CLI 脚手架安装成功,
同时我们也可以通过版本号来确定是不是你需要安装的版本
image
最新的vue CLI版本已经是4.3.1了
2.3 使用CLI项目模板
注意Vue CLI 3.X 和4.X的脚手架的模板和Vue CLI2.X 完全不同,
如果你还想使用Vue CLI2.X的脚手架模板,就需要参考官网给出的处理方案
官网关于使用 2.X 模板的方法
image
至此Vue CLI的安装就已经完成了, 那么接下来就让我们好好看看CLI2.X的项目模板和CLI3.X项目模板
3. 创建Vue CLI 2的项目
3.1 初始化化Vue CLI2项目
使用下面的命令初始化vue CLI2的项目
$ vue init webpack myvue
初始化项目cli2项目图
image
3.2 运行项目
通过上面命令创建项目成功以后,
进入到项目里,然后通过npm run dev运行项目
其实在初始化Vue CLI2项目成功以后也会给我们对应的提示
安装成功后提示:
image
因此我们可以通过命令运行我们项目
image
编译成功以后,会提示:你的项目运行在http://localhost:8080地址
这样我们就可以在浏览器地址栏输入地址运行项目
image
3.3 项目目录
项目已经成功启动,那么接下来我们就来好好看看项目模板的目录结构
image
4. Vue CLI3
4.1 CLI3 和 CLI2 版本的区别
- cli3 是基于webpack4开发的,cli2是还是基于webpack3开发的
- cli3 的设计原则是'0配置',移除了根目录下build和config的webpack 配置文件目录
- cli3 提供了
vue ui命令,提供可视化配置,更加人性化 - 移出了static 文件夹,增加了 public文件夹,并且将index.html移动到public目录中
4.2 CLI3的安装命令
通过下面的命令初始化Vue CLI3的工程项目
$ vue create myproject
4.3 CLI3初始化项目中的配置介绍
4.3.1 选择配置方式
可以使用默认的配置,也可以自己配置需要安装的内容
自己配置后还可以保存,下次在初始化项目时就可以使用上一次配置
image
4.3.2 自定义配置
自定义配置项目,选择自己要安装的配置来初始化项目
image
4.3.3 配置保存选择
配置选择完毕后,会询问你是将配置单独生成文件,还是追加到package.json 文件中
建议使用单独配置文件,这样会比较方便修改配置
image
4.3.4 是否保存配置
是否将本次初始化项目的配置保存起来,以便下次初始化项目时直接使用
image
4.3.5 给保存的配置命名
如果选择保存本次配置,就给配置命名
image
4.3.6 初始化完成
当项目配置初始化完毕后,提示你进入项目,并且告知启动项目的终端命令
image
4.3.7 有保存配置的初始化项目
如果之前有保存过配置,那么在你初始化项目的时候,就会让你自己选择,
可以使用默认配置,或者自定义配置,也可以使用上一次保存的自定义配置
image
4.3.8 项目重名
项目重名就会提示,
有三种选择: 覆盖原来的项目, 与原理的项目合并,或者取消本次初始化项目
image
4.3.9 启动项目
通过yarn serve命令启动项目
image
4.4 CLI3工程项目目录
image
我们会发现CLI3的项目目录中看不到webpack的配置
5. CLI3 的配置
默认在CLI3的项目目录中是看不到配置文件的,那么有的时候我们需要修改配置文件怎么办呢,
接下来就看看如何修改配置
5.1 通过可视化界面修改配置
CLI3中提供了一个可视化操作,终端命令为vue ui
启动可视化操作界面
$ vue ui
在可视化界面中找到配置,
image
然后就可以在这里就改项目配置为了
5.2 在项目中修改配置
在根文件下创建vue.config.js文件, 就可以在这个文件中定义需要修改的配置
cli3会自动将vue.config.js文件中的配置和默认的配置进行合并
例如:配置示例:
module.exports = {
baseUrl: "/" , //根路径
outputDir : "dist"， //构建输出目录 ，在npm run build 打包生成的文件夹的名字
assetsDir: "assets", //静态资源目录（js,css,img）
lintOnSave ： false, // 是否开启eslint保存检测，true | false | error 默认使用false 不打开
devServer: {
open: false, // npm run server 运行时是否自动在浏览器中打开
host: "localehost"， //主机名字
prot: 8080, //端口号 默认时8080
https: false， //是否启用https协议，最好不使用 默认使用http协议
hotOnly: false, //热更新，就用false
//重点时这里跨域
proxy: {
'/api': {
target: "http://localhost:5000/api/",
ws: true,
changOrigin: true,
pathRewrite: {
"^/api": ""
}
}
}，
//before 在所有的其他中间件之前，提供自定义中间件功能，这可以用来配置自定义处理程序
before(app) {
app.get("/api/goods",(req,res) => {
res.json(goods);
})
}
}
}
6. 单文件组件测试
我们可以通过一个全局的包对于一些特定的.vue文件(也就是单文件组件)进行单独的测试
6.1 安装全局的cli-service
$ npm install -g @vue/cli-service-global
6.2.独立运行vue文件
//vue serve vue文件
vue serve hello.vue
这样就可以单独测试某些组件了
网友评论