vue-cli 3.x 与vue-cli 2.x构建项目的区别
vue-cli 3.0 正式版于 8月10号发布，但是3.0 与 2.0 版本在搭建项目时到底有何不同呢？下面做一下简单的介绍，希望可以帮到有需要的朋友
1、 全局安装vu-cli 3.0 npm install -g @vue/cli (如果之前安装了2.0版本，先卸载 npm uninstall -g vue-cli ) ; 安装完 3.0 后，有以下两种创建项目的方式：
a 、 指令： vue create project-name ;然后会出现默认和手动两个选项，跟着步骤走就好；下面选择手动等等
b、用视图创建项目 vue ui
然后点击创建跟着步骤走就好；
如果：你个人还是很想用之前的创建项目的方式 ，那你则需要安装 （npm install -g @vue/cli-init） 这样就可以像之前一样创建项目 eg: vue init webpack vue-program
2、用vue-cli3.0版本创建的项目与2.0版本相比较，我们会发现，文件目录少了很多 eg：build、config，那么如何像vue-cli 2.* 之前关于端口号的配置、打包之后的路径的配置、图片的配置等，到哪里配置呢？？vue-cli 3.0 可以在项目的根目录下新建一个 vue.config.js 文件，之前繁琐的配置都可以在这里直接配置。
官方是这样说的。vue.config.js 是一个可选的配置文件，如果项目的（和package.json 平级）根目录中存在这样一个文件，那么他会被 @vue/cli-service 自动加载，（并覆盖其内部的配置）
下面我们就看一下vue.config.js 里的相关配置
这是我们只需要在根目录下创建 后缀名为.env（.env.prod / .env.pre / .env.test）的文件，将你需要的环境配进去就可以了 eg:
这里需要注意一点：由于我们再打包时，不需动NODE_ENV，所以这里面我们可以直接用production ,(如果改了，你打包出来的项目会发现会少很多)，如果不想用，那你则需要去底层进行修改相应的配置。
4、最后指出配置好环境以后，我们需要在package.json里面配置相应的指令；
“buildTest” ：“vue-cli-service build --mode test”,
"buildPre" ： "vue-cli-service build --mode pre"
"build" : "vue-cli-service build --mode prod"
// 打包，会把process.env.NODE_ENV设置为步骤4中‘.env.alpha’文件设置的值。
// 注意，这里 “--mode 名字“ 要和步骤2中文件名“.env.名字”名字保持一致
什么是VueCLI3
这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【什么是VueCLI3】
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
通过 @vue/cli 搭建交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
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 版本。
npm install -g @vue/cli
# OR
yarn global add @vue/cli
1
2
3
使用 vue ui 命令打开UI界面，快速创建Vue-CLI3.0项目
点击创建项目会进来这么一个界面：
填写项目名
选择包管理器
选择初始化git仓库
我们选择手动，此时会让我们选择需要使用的库和插件，比如bebel、vuex、vue-router 等常用的库
后面根据自己的需要配置就好了。 非常的简洁！
常见问题
使用vue-cli初始化后，到底还要不要装vuex,vue-router?
解决方案
不需要，vueCLI3.0 在初始化后自动安装了vuex 和 vue-router
编码实战
略
扩展思考
如何在VueCLI3.0中使用VueCLI2.x的模板
Vue CLI 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project
1
2
3
更多讨论
Q1： build哪里去了？config哪里去了？配置都消失了？
A1:
vue-cli3.0默认项目目录与2.0的相比，更精简:
1.移除的配置文件根目录下的，build和config等目录，
2.移除了static文件夹，新增了public文件夹，并且index.html移动到public中。
3.在src文件夹中新增了views文件夹，用于分类 试图组件 和 公共组件 。
4.大部分配置 都集成到 vue.config.js这里,在项目根目录下
在vue.config.js里大概配置
常用的路径名、根目录、预处理、devServer配置、pwa、dll、第三方插件
vue.config.js
Q2. webpack.config.js 去哪了?
A2:
webpack的相关配置可以写入vue.config.js 内的 configureWebpack的选项下，但是如果是vue.config.js中已有的配置， 不要写入configureWebpack内。
Q3 . npm run dev改了？
A3:
在根目录的package.json里有如下命令
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”
所以以前那些用npm run dev的，约莫是只能npm run serve/npm run build了
当然本身是“打包了一个express之类的serve工具啥的.????”
具体是package.json里面“scripts”有写..键值..
我最近用的是npm run serve
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：，初学者转行到互联网的聚集地
Syntax Error: TypeError: Cannot read property 'range' of null
vue-cli3搭建的项目
在执行 npm run serve 后提示TypeError: Cannot read property 'range' of null
方法一
删除node_modules
重新安装：npm/cnpm install
方法二
可能是babel-eslint版本问题：
常见出问题的比如"babel-eslint": "^10.0.3"
解决方法一：可更换至稳定版本cnpm i babel-eslint@7.2.3
vue2.0和3.0区别
项目目录不同
1、vue-cli3.o移除了config.文件夹。
2、多了vue.config.js文件。
3、新增了一个views文件夹。
4、删除了static新增了public文件夹。
5、index.html移动到public了。
配置项不同
1、vue-cli2.0的域名配置，分为开发环境和生产环境。
2、所以配置域名时，需要在config中的dev.env.js和。
3、prod.env.js中分别配置3.0 config.文件已经被移除。
4、但是多了。env.production和env.development文件。
5、除了文件位置，实际配置起来和2.没什么不同。
创建项目的方式不一样
1、vue-cli2.0，vue init webpack项目名。
2、vue-cli3.0 vue create项目名。
vue 3.0 正式版来了
Vuejs 于2020年9月19日凌晨发布了代号为One Piece的 3.0 版本。以下简称Vue3
跟着官网文档，我们一起来体验下新版的魅力。
Vue3官方文档地址：
首先是测试工具
谷歌插件（需要翻墙）：
火狐插件：
electron桌面应用插件：
出于原型制作或学习目的，您可以将最新版本与以下各项配合使用：
使用Vue构建大型应用程序时，建议使用NPM安装方法。它与 Webpack 或 Rollup 等模块 捆绑器 很好地配对。Vue还提供了用于创作 单一文件组件的 随附工具。
ue提供了一个 官方CLI 用于快速搭建单页应用。
对于Vue 3，您应该使用Vue CLI v4.5，该版本在上npm提供@vue/cli@next。要升级，您需要在@vue/cli全局范围内重新安装最新版本：
然后在Vue项目中运行
在 dist/ NPM软件包的目录中，您会找到许多不同的Vue.js版本。
全局安装脚手架
查看脚手架版本是否在4.5以上（含4.5）
创建项目
此时终端显示如下图
选择第二项 Vue 3 Preview ，等待安装完成。
到此，恭喜你迈入了 Vue 3.0的时代！