关于vue-cli3.0的安装搭建项目网上也有很多文章,最近整理电脑,翻起之前的笔记记录,打算放到博客上,在此整理整理,简单存档记录一下。

1、先全局安装vue-cli 3.0

官方文档:https://cli.vuejs.org

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-cli3.0入门-配置vue.config.js文件(三)