Vue.js+vue-element搭建属于自己的后台管理模板：创建一个项目（四）

前言

本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目，在学习Vue CLI之前我们需要先了解下webpack 代码编译工具，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

webpack

官方中文文档地址：

https://www.webpackjs.com/concepts/

Vue CLI 脚手架构建工具

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，搭建交互式的项目脚手架，Vue CLI版本3.x开始包名称由vue-cli 改成了 @vue/cli，如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 卸载后再安装3.x版本，Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

安装Vue CLI

在命令行输入：cnpm install -g @vue/cli （安装新包）

我们这里推荐用vue-cli 3.x构建项目，新版优化了编译速度，不过你也可以通过老版本创建项目，老版本安装命令：cnpm install --global vue-cli

备注：安装后，检查是否安装成功。vue -V (在此注意V为大写，也可以用vue --version)

创建一个项目

运行以下命令来创建一个新项目：

vue create hello-world

项目构建完成后，会在当前目录下创建hello-world项目文件夹。

$ cd hello-world
$ npm run serve

第一项为默认创建项目，默认的设置非常适合快速创建一个新项目的原型，这里我们选择第二项手动创建项目，按回车继续。

手动设置则提供了更多的选项，通过上下键选择所需的包按空格键选中后，按回车继续创建项目。

创建完成后我们进入hello-world目录，输入npm run serve运行项目（老版本运行命令为npm run dev）。

看到以上提示说明项目成功创建运行了，现在可以通过浏览器打开http://localhost:8080来访问我们网站了。

打开项目

我们通过Visual Studio Code工具打开项目，文件 - 打开文件夹，选中我们创建的项目hello-world

目录结构：

├── public                    # 静态资源
│   │── favicon.ico        # favicon图标
│   └── index.html        # html模板
├── src                       # 源代码
│   ├── assets              # 主题字体等静态资源
│   ├── components     # 全局公用组件
│   ├── router               # 路由
│   ├── store                # 全局 store管理
│   ├── views               # views 所有页面
│   ├── App.vue           # 入口页面
│   └── main.js             # 入口文件加载组件初始化等
├──.browserslistrc        # 浏览器兼容性
├── .eslintrc.js              # eslint 配置项
├── babel.config.js       # babel 配置项
└── package.json         # package.json

package.json

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息。

{
  "name": "hello-world",  //npm包名称
  "version": "0.1.0",   //npm包版本
  "description": "h-gx前端UI框架", //npm包描述
  "author": "h_gxi@foxmail.com",  //作者
  "license": "ISC", //开源许可说明
  "main": "main.js",
  "scripts": {       //脚本命令
    "serve": "vue-cli-service serve", //运行项目
    "build": "vue-cli-service build", //编译打包
    "lint": "vue-cli-service lint"    //
  },
  "dependencies": { //生产环境 请不要将测试或过渡性的依赖放到dependencies中
    "core-js": "^3.3.2",
    "element-ui": "^2.12.0",
    "vue": "^2.6.10"
  },
  "devDependencies": {  //开发环境 
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-eslint": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isDev = process.env.NODE_ENV === 'development' // 开发环境

// 打包输出路径
const outputDir = 'dist'

module.exports = {
  outputDir: outputDir,
  // 部署应用包时的基本 URL
  publicPath: '/',
  // 端口
  devServer: {
    port: 6220 
  },
  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
  transpileDependencies: ['element-ui'],
  // false生产环境下不打包map文件，true时可以看到所有源码。
  productionSourceMap: false,
  // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
  configureWebpack: {
    plugins: [
      /**
       * 复制nm-lib-skins/public目录下的文件到输出目录
       */
      new CopyWebpackPlugin([
        {
          from: path.join(__dirname, 'public'),
          to: path.join(__dirname, outputDir),
          ignore: ['index.html']
        }
      ])
    ]
  },
  // 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
  chainWebpack: config => {
    /**
     * 删除懒加载模块的 prefetch preload，降低带宽压力
     * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
     * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
     * 而且预渲染时生成的 prefetch 标签是 modern 版本的，低版本浏览器是不需要的
     */
    config.plugins.delete('prefetch').delete('preload')

    /**
     * 设置index.html模板路径，默认public中的模板
     */
    config.plugin('html').tap(args => {
      args[0].template = './public/index.html'
      return args
    })

    config
      // 开发环境
      .when(
        isDev,
        // 转换过的代码（仅限行） https://webpack.docschina.org/configuration/devtool/
        config => config.devtool('cheap-source-map')
      )
      // 非开发环境
      .when(!isDev, config => {
        config.optimization.minimizer([
          new UglifyJsPlugin({
            uglifyOptions: {
              // 移除 console
              // 其它优化选项 https://segmentfault.com/a/1190000010874406
              warnings: false,
              compress: {
                drop_console: true,
                drop_debugger: true,
                pure_funcs: ['console.log']
              }
            }
          })
        ])

        // 拆分
        config.optimization.splitChunks({
          chunks: 'all',
          cacheGroups: {
            elementUI: {
              name: 'chunk-element-ui',
              priority: 20,
              test: /[\\/]node_modules[\\/]element-ui(.*)/
            }
          }
        })

        config.optimization.runtimeChunk({
          name: 'manifest'
        })
      })
  }
}