关于vue-cli3.0的安装搭建项目网上也有很多文章,最近整理电脑,翻起之前的笔记记录,打算放到博客上,在此整理整理,简单存档记录一下。
1、先全局安装vue-cli 3.0
npm install -g @vue/cli
查看安装的版本 vue –version 或者 vue -V
2、创建一个项目
vue-cli3.0是通过vue create来创建一个项目,比如我们要创建一个新的项目叫vue-cli33-select,执行如下命令即可:
vue create vue-cli33-select如图所示:
查看帮助 vue –help
查看具体命令的帮助 vue create –help
3、选择我们的配置
我们可以选择默认的还是手动配置,这里选择手动配置为例
3.1 、选择Manually select features 如上图所示
3.2、选择你项目需要的一些特性
大家根据自己的需要选择,敲空格键配合方向键进行选择。这里个人选择Babel、vue-router、vuex、CSS预处理器、Linter代码检测和格式化 然后回车, 如图所示:
3.3、是否使用history路由?这里选择yes
history路由具体文档:https://router.vuejs.org/zh/guide/essentials/history-mode.html
3.4、选择css处理器,这里sass,大家可以根据自己需要选择
3.5、选择ESLint的代码规范,这里选择eslint + standard config
JavaScript standard 代码规范全文
3.6、选择何时(保存还是更新提交)进行代码检测,这里选择保存时进行检测
3.7、选择Babel、PostCSS、ESLint等配置文件存放位置
这里选择第一个,单独保存在各自的config文件中
3.8、是否保存本次创建项目的配置项?
此项选择可以用于下次快速创建项目,如果选择yes,那么之后所有新建项目都按这次的配置来新建,这里选no,个人建议选择no。
3.9、然后回车开始创建我们的项目,等待初始化安装完就可以了。
看到如图所示说明成功了。
4、使用npm run serve运行我们的项目
cd 我们的项目(vue-cli33-select)目录, 然后使用npm run serve可以运行我们的项目,http://localhost:8080/ 打开就可以看到我们的运行的结果了,如图
此时我们的项目如下所示:
package.json代码如下:
{ "name": "vue-cli33-select", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^2.6.5", "vue": "^2.6.10", "vue-router": "^3.0.3", "vuex": "^3.0.1" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.7.0", "@vue/cli-plugin-eslint": "^3.7.0", "@vue/cli-service": "^3.7.0", "@vue/eslint-config-standard": "^4.0.0", "babel-eslint": "^10.0.1", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", "node-sass": "^4.9.0", "sass-loader": "^7.1.0", "vue-template-compiler": "^2.5.21" } }
如果要安装一下插件,在3.0中 使用add方法, vue add vuetify
如何拉取 cli2.x 模板 (旧版本)?
vue cli 3 和旧版使用了相同的 vue 命令,所以vue-cli2 被覆盖了。如果你仍然想使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:
npm install -g @vue/cli-init
然后初始化新建我们的项目就可以了。
vue init webpack my-project
二、我们还可以使用vue ui可视化界面来创建项目
vue ui 给我们提供了一套完整的vue项目构建的可视化界面,对我们来说,有更多的自由和便利性。
1、输入vue ui,如图所示:
浏览器会打开http://localhost:8000/project/select,我们选择创建,都是可视化的,按文字意思的说明步骤来就可以创建项目了。选择配置跟上面配置一致。这里就不详细说明了。
选择完以后等待创建。安装成功后,如图所示
最后在任务(http://localhost:8000/tasks)菜单里,运行,打开http://localhost:8080/ 就可以打开我们的项目了
项目目录如下:
CLI2.0的项目目录
三、Vue CLI2.0和Vue CLI3.0的一些区别
简单记录一下它们的一些区别
1、目录结构的不同
1)、看比较,最直观的区别就是:CLi3.0中少了build、config两个目录,CLi3.0目录结构看起来更简洁了,而且node_modules也给自动下载好了。至于build、config中的相关配置,我们可以在根目录新建一个vue.config.js来实现。
2)、在CLi2.0中 ,static默认是存放静态文件,比如图片,打包不经过webpack编译,直接拷贝一份到dist的。
在CLI3.0中,没了static文件夹,新增public文件夹,在CLI3.0中,静态资源有两种处理方式,经过webpack处理和不经过webpack处理。
3)、在CLI3.0中,index.html放在public文件夹中了,它会被 html-webpack-plugin 处理。
官方文档:https://cli.vuejs.org/zh/guide/html-and-static-assets.html#html
2、vuex 的不同
在CLi2.0中 ,我们是搭建完成后,需要自己npm install的。
在CLI3.0中,是在搭建过程中,供我们选择的,而且只用一个store.js。
3、配置Babel的不同
CLI3.0中是使用了Babel7 中的新配置格式 babel.config.js,通过 babel.config.js 可以配置使用任何其它 Babel 预设选项或插件。
4、启动服务方式的不同
//2.0 npm run dev //3.0 npm run serve因为:
CLI2.0中启动方式是webpack-dev-server –inline –progress –config build/webpack.dev.conf.js,使用的是webpack-dev-server搭的服务。
CLi3.0启动方式是vue-cli-service serve,文件位于node_modules@vue\cli-service\bin。
官方文档:https://cli.vuejs.org/zh/guide/cli-service.html
vue-cli3.0入门-配置vue.config.js文件(三)