vue cli3.0快速搭建项目详解

这篇文章主要介绍下vue-cli3.0项目搭建，项目结构和配置等整理一下，分享给大家。

一、介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件：

CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）

CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令）

CLI 插件：给Vue 项目提供可选功能的 npm 包 （如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试 等）

二、安装

1、全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步：

 npm uninstall vue-cli -g //或者 yarn global remove vue-cli

　　

2、Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+，你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本）。

（2）下载安装nodeJs，中文官方下载地址：http://nodejs.cn/download/ 

3、安装@vue/cli（Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli）

 cnpm install -g @vue/cli //yarn global add @vue/cli

　　vue -V   检查vue版本号

三、使用

1、vue create 搭建新项目

（1）新建项目：

1、初始化一个vue

*官方提示：如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作，必须通过 winpty vue.cmd create hello-world 启动这个命令

vue create <Project Name> //文件名 不支持驼峰（含大写字母）

2、直接选择Default (Vue 3 Preview)也可，只是生成的项目结构单一。我此处选择自定义

3、按需添加你想要的插件（vue3.0搭载的Vuex和Router均为4.0版本的）

4、选择vue版本，此处我们选择3.x

5、选择路由配置，看个人需要。我选n

6、选择css预编译器。此处选择Less

7、按需选择ESLint配置

8、选择Lint on save
9、选择配置在package.json还是单独文件保存配置

10、是否保存本次配置，我一般选no

 2，项目结构

精简了很多，但还是和vue2.0有很多区别的，基本的用法变化不是特别大

1.vue-cli3.0移除了配置文件目录，config和build文件夹
同时移除了static静态文件夹，新增了public文件夹，打开层级目录还会发现，index.html移动到public中

2.配置项   3.0 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同
没了config文件，跨域需要配置域名时，从config/index.js 挪到了vue.config.js中，配置方法不变

3.渲染   Vue2.x使用的Virtual Dom实现的渲染
Vue3.0不论是原生的html标签还是vue组件，他们都会通过h函数来判断，如果是原生html标签，在运行时直接通过Virtual Dom来直接渲染，同样如果是组件会直接生成组件代码    4.数据监听   Vue2.x大家都知道使用的是es5的object.defineproperties中getter和setter实现的，而vue3.0的版本，是基于Proxy进行监听的，其实基于proxy监听就是所谓的lazy by default，什么意思呢，就是只要你用到了才会监听，可以理解为‘按需监听’，官方给出的诠释是：速度加倍，同时内存占用还减半。

4.按需引入   Vue2.x中new出的实例对象，所有的东西都在这个vue对象上，这样其实无论你用到还是没用到，都会跑一变。而vue3.0中可以用ES module imports按需引入，如：keep-alive内置组件、v-model指令，等等。

根据需要在根目录下新建 vue.config.js自行配置，eg：（简单配置，更多配置详情参见官网：https://cli.vuejs.org/zh/config/）

 module.exports = {
    baseUrl: '/',// 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
    outputDir: 'dist',// 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
    assetsDir: '',//放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
    indexPath: 'index.html',//指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
    pages: {//pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错
      index: {//除了 entry 之外都是可选的
        entry: 'src/index/main.js',// page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件
        template: 'public/index.html',// 模板来源
       filename: 'index.html',// 在 dist/index.html 的输出
       title: 'Index Page',// 当使用 title 选项时,在 template 中使用：<title><%= htmlWebpackPlugin.options.title %></title>
       chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk
     },
     subpage: 'src/subpage/main.js'//官方解释：当使用只有入口的字符串格式时,模板会被推导为'public/subpage.html',若找不到就回退到'public/index.html',输出文件名会被推导为'subpage.html'
   },
   lintOnSave: true,// 是否在保存的时候检查
   productionSourceMap: true,// 生产环境是否生成 sourceMap 文件
   css: {
     extract: true,// 是否使用css分离插件 ExtractTextPlugin
     sourceMap: false,// 开启 CSS source maps
     loaderOptions: {},// css预设器配置项
     modules: false// 启用 CSS modules for all css / pre-processor files.
   },
   devServer: {// 环境配置
     host: 'localhost',
     port: 8080,
     https: false,
     hotOnly: false,
     open: true, //配置自动启动浏览器
     proxy: {// 配置多个代理(配置一个 proxy: 'http://localhost:4000' )
       '/api': {
         target: '<url>',
         ws: true,
         changeOrigin: true
       },
       '/foo': {
         target: '<other_url>'
       }
     }
   },
   pluginOptions: {// 第三方插件配置
     // ...
   }
 };

vue-cli升级到3之后，减少了很多的配置文件，将所有的配置项都浓缩到了vue.config.js这个文件中，所以学懂并会用vue.config.js文件很重要。

这里有一篇关于vue-cli3的全面配置的文章供大家参考，https://segmentfault.com/a/1190000017008697