VueCLi3.0及以上版本搭建vue项目过程

VueCLi3.0及以上版本搭建vue项目过程

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.前期准备

首先，你要有一个nodejs环境，需要去nodejs官网中下载安装。
输入下面的命令检查当前安装的Vue-cli版本：
注意：上面检查Vue-cli版本的命令中，V一定要大写。

$ vue -V

结果如下：

说明本机安装的是3版本。如果是2.xx版本，就需要先卸载掉旧版本，然后在安装新版本。卸载旧版本命令：

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

2.使用vue-cli3.0搭建项目

（1）下载并安装Vue-cli3

指令：npm install -g @vue/cli或者使用yarn global add @vue/cli 安装都可以：

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

安装时间可能会稍微长一些，请耐心等待
这里多讲一点，如果你安装好vue-cli3后,还是想用vue-cli2.0创建项目,你可用以下命令拉取vue-cli2.0旧版本。

$ npm install @vue/cli - init
vue init webpack 项目名

（2）使用命令行创建项目

下面先使用命令行工具创建一个Vue项目：

首指令：vue create “这里是你自定义的项目名称” 或者使用vue ui图形化界面搭建

输入命令以后直接回车，然后会让你选择是使用默认（default）还是手动（Manually）。

这里出来三个选项，分别表示你之前创建项目存储配置过的文件项、官方提供默认的脚手架、第三个可以根据个人需求自己配置，这里我们直接选第三个自己配置，出现以下选项：

Babel ：JSES6语法转换ES5
Router：路由
Vuex：全局状态管理工具
Linter：ESLint语法检测
CSS Pre-processors：CSS语法选择像less和sass、scss

这里根据个人选择点击空格选中，基本常用的就是这些选择

Babel： Babel编译
TypeScript：TypeScript支持
Progressive Web App (PWA) Support： PWA支持
Router： Vue路由
Vuex： Vue状态管理
CSS Pre-processors： CSS预编译器（包括：SCSS/Sass、Less、Stylus）
Linter / Formatter： 代码检测和格式化
Unit Testing： 单元测试
E2E Testing： 端到端测试

路由模式的选择Y选择的是H5的history历史模式，n就是hash模式#号的形式

CSS预编译器

ESLint语法检测的强弱程度根据个人和公司要求自行选择

选择何时进行代码检测

Lint on save： 在保存时进行检测
Lint and fix on commit： 在fix和commit是进行检查

选择Babel存放位置

选择是否要保存这套配置，n表示否，y回车后输入配置的名字

接下来等待下载完毕即可

下载完毕cd进入目录，输入npm run serve启动项目。

3.搭建完毕，目录结构的认识

● node_modules项目所需的依赖，模块存放位置

public共有资源

在public下面有两个文件分别是index.html单页面，整个项目唯一的页面
favicon.ico初始化项目顶部logo图片

● src平常我们要操作的文件代码主体，像路由、组件、Vuex都在这里面配置，还有App.vue根组件

main.js入口文件

● browserslistrc 设置浏览器兼容

● eslintrc.js ESLint 配置文件

● gitignore git项目管理文件

● package.json 包管理依赖文件

● vue.config.js 这个需要自己手动添加文件，是全局CLi的配置文件

根据需要在根目录下新建 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

热更新配置

在vue.config.js添加

chainWebpack: config => {
 	// 修复HMR
 	config.resolve.symlinks(true);
},

修改css部分热更新还需要注释掉 //extract: true,

css: {
     //extract: true,// 是否使用css分离插件 ExtractTextPlugin
     sourceMap: false,// 开启 CSS source maps
     loaderOptions: {},// css预设器配置项
     modules: false// 启用 CSS modules for all css / pre-processor files.
},

这样，热更新配置就完成了！

项目搭建和目录结构基本过程就是这样