vue-cli3 创建项目

vue-cli的安装、查看、更新

vue-cli2.0+ ：npm install vue-cli -g ；  

vue-cli3.0+  ： npm install @vue/cli -g

版本查看：vue -V

卸载： npm uninstall vue-cli -g

作者当前版本：

利用@符号安装作者版本： npm install @vue/cli@3.11.0 -g  (未试过)

作者npm以及nodejs版本：

 

备注：

　　Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)

创建项目：

快速cmd到当前文件夹： 

 

1. 控制台： vue create demo  ；  选择默认（default）还是手动（Manually）

 ；  

2. 选择 按下键盘下选中 Manually ，回车：

3. 选择配置， 空格键是选中与取消，A键是全选；（作者选中：Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter）

TypeScript： 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router： 支持 vue-router 。
Vuex： 支持 vuex 。
CSS Pre-processors： 支持 CSS 预处理器。
Linter / Formatter： 支持代码风格检查和格式化。
Unit Testing： 支持单元测试。
E2E Testing： 支持 E2E 测试。

 

4.  出现下面界面，输入n 按下回车：

 

5. css的预处理， 作者选中：

6.  这里要选择 standard ，对应的是一些eslint 的风格 

 

7. 语法检查方式，选择保存就检测（第一个是保存检测，第二个是fix和commit的时候检测）

 8. 配置文件存放（一个是独立文件夹位置，第二个是在package.json文件）

9. 是否记录这一次的配置，以便下次使用，如一开始的时候会显示的vuecli3配置（作者输入y, 起名commom-demo） 回车确定等待下载

10.  作者下载的时候，安装不了node-sass， 需要用淘宝镜像重新安装，不然启动失败

淘宝镜像安装： npm install -g cnpm --registry=https://registry.npm.taobao.org

安装命令： cnpm install node-sass --dev

11.  安装好，启动完成（打包，启动命令，查看package.json）：

12.  项目重新用cnpm install 安装，发现有下面报错，虽然不影响使用，不过完美主义者看着不爽。（意思是说 scss-loader 8.0.0 的版本和当前node-sass版本不匹配，可能是项目初始化的时候下载不了node-sass, 作者重新用淘宝镜像下载出现的问题）

解决方案：

卸载当前版本sass-loader命令：npm uninstall sass-loader 

安装低版本的sass-loader命令：npm install sass-loader@7.3.1 --save-dev

项目常用的插件说明以及安装

作者开发的是后台管理系统，下面列举一些用到的插件

1） axios 请求接口使用的插件；

安装 cnpm install axios --save

2）element-ui 前端ui框架； 官网： https://element.eleme.cn/#/zh-CN/component/installation

安装： cnpm install element-ui -S

3）moment 前端日期处理的插件； 官网： http://momentjs.cn/

　　安装： cnpm i moment -S （简写模式）

4）qrcodejs2 二维码生成器

　　安装： cnpm i qrcodejs2  -S

5）js-md5 密码加密

　　安装：cnpm i js-md5 -S

6）vuescroll 滚动条样式

　　安装：cnpm i vuescroll -S

一起:  cnpm i axios js-md5 moment element-ui qrcodejs2 vuescroll -S

关于配置文件vue.config.js的常用说明

官网：https://cli.vuejs.org/zh/config/    下面是常用的配置说明

1） 配置全局应用scss变量、混入

安装： npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

配置：vue.config.js文件：

  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      // 引入全局样式变量
      patterns: [
        path.resolve(__dirname, 'src/assets/styles/var.scss'),
        path.resolve(__dirname, 'src/assets/styles/mixin.scss')
      ]
    }
  },

　　

 2） 样式找到源

配置：vue.config.js文件：

  css: {
    // 让样式找到源
    sourceMap: true,
  },

3）配置代理相关

下面的例子是所有/api 开头的请求，代理到 http://localhost:8081/ ，target 是后端对接人，或者测试环境的地址

  devServer: {
    hot: true,
    // 配置 eslint 错误显示在控制台上
    clientLogLevel: 'warning',
    proxy: {
      '/api': {
        target: ''http://localhost:8081/', // 代理服务器
        secure: false,
        changeOrigin: true,
        pathRewrite: { '/api': '' }
      }
    }
  }

由于上面只是代理/api开头的地址，问题是实际上的地址未必都是 /api 开头，所以公共请求那里，有下面配置：

备注： axios 插件的 baseURL可以给所有请求添加一样的前缀，可以是绝对路径也可以相对路径；下面的意思是所有开发环境的请求，都自动添加前缀 ‘/api’ ,  生产环境build的时候回去掉；

4）别名设置

使用： import xxx from '@/xxx';  =>  import xxx from 'src/xxx';

  // 别名设置
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'));
  },

　　

5）设置部署路径publicPath ( 3.3之前的版本是baseUrl)

publicPath: '/my-app/',

备注：所有的路径，最好使用 require,

例子：

　　

6）多页面配置

如果应用上有某些页面需要区别于整个应用，例如无需登录认证，权限认证，或者某些页面是所有人都可以访问的，这样的场景可以配置多页面，官方说明如下：https://cli.vuejs.org/zh/config/#pages

使用多页面的情况：

　　登陆页面，

　　有一些需要提供给用户看（用户不需要登陆）的页面，例如提供一个下面客户端的页面等；

 // 单页面无需配置 
 pages: {
    index: {
      entry: './src/main.js',
      template: './public/index.html',
      filename: 'index.html'
    },

    versionDetails: {
      entry: './src/pages/version-details/main.js',
      template: './public/index.html',
      filename: 'versionDetails.html'
    }
  },

访问第一个页面index.html:  http://localhost:8080/ (默认页面)

访问第二个页面： http://localhost:8080/versionDetails.html?id=25#/ （配置页面的filename）

7）lintOnSave报错语句的配置

另外的一个配置：  eslint 错误显示在控制台上 

8）关于资源路径的解释

静态资源可以通过两种方式：

a: 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。

b: 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

 

public 文件夹(建议少用)

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。

public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀：

 

下面是作者的配置：

url.config.js：

let baseURL = {
  development: '/api', // 开发环境
  production: '' // 生产环境
};

module.exports = {
  // 配置axios的baseURL； 开发环境是所有的请求前序添加 /api 用于代理； 生产环境设置为''
  axiosBaseURL: baseURL[process.env.NODE_ENV],
  // 开发环境代理服务器配置
  proxyTarget: 'http://localhost:8081/'
  // proxyTarget: 'http://10.8.108.105:8081/'
};

vue.config.js

var urlConfig = require('./url.config.js');
const path = require('path');
const resolve = function (dir) {
  return path.join(__dirname, dir);
};

module.exports = {
  pages: {
    index: {
      entry: './src/main.js',
      template: './public/index.html',
      filename: 'index.html'
    },

    versionDetails: {
      entry: './src/pages/version-details/main.js',
      template: './public/index.html',
      filename: 'versionDetails.html'
    }
  },

  css: {
    // 让样式找到源
    sourceMap: true,
  },

  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      // 引入全局样式变量
      patterns: [
        path.resolve(__dirname, 'src/assets/styles/var.scss'),
        path.resolve(__dirname, 'src/assets/styles/mixin.scss')
      ]
    }
  },

  // 打包后是否去掉打印语句
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = false;
    }
  },

  // 别名设置
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'));
  },


  publicPath: '/portal',

  devServer: {
    hot: true,
    // 配置 eslint 错误显示在控制台上
    clientLogLevel: 'warning',
    proxy: {
      [urlConfig.axiosBaseURL]: {
        target: urlConfig.proxyTarget,
        secure: false,
        changeOrigin: true,
        pathRewrite: { [`^${urlConfig.axiosBaseURL}`]: '' }
      }
    }
  }
};

package.json（作者的版本全部限死）

补充下版本的知识：

（1）指定版本："classnames": "2.2.5"，安装2.2.5的版本

（2）~： "classnames": "~1.1.0", 安装1.1.x的最新版本（不低于1.1.0），但不安装1.2.x，就是说安装时不改变大版本号和次要版本号

（3）^： "classnames": "^3.1.4", 安装3.1.4及以上的版本，但是不安装4.0.0，也就是说安装时不改变大版本号。

{
  "name": "demo-02",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "0.19.0",
    "core-js": "3.4.3",
    "element-ui": "2.13.0",
    "js-md5": "0.7.3",
    "moment": "2.24.0",
    "qrcodejs2": "0.0.2",
    "vue": "2.6.10",
    "vue-router": "3.1.3",
    "vuescroll": "4.14.4",
    "vuex": "3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.1.0",
    "@vue/cli-plugin-eslint": "4.1.0",
    "@vue/cli-service": "4.1.0",
    "@vue/eslint-config-standard": "4.0.0",
    "babel-eslint": "10.0.3",
    "eslint": "5.16.0",
    "eslint-plugin-vue": "5.0.0",
    "node-sass": "4.12.0",
    "sass-loader": "8.0.0",
    "style-resources-loader": "1.3.2",
    "vue-cli-plugin-style-resources-loader": "0.1.4",
    "vue-template-compiler": "2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

eslint配置：.eslintrc.js

// https://eslint.org/docs/user-guide/configuring
module.exports = {
  root: true,

  parserOptions: {
    parser: 'babel-eslint'
  },

  env: {
    browser: true
  },

  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],

  // required to lint *.vue files
  plugins: ['vue'],

  rules: {
    // function 的小括号之前必须要有空格
    'space-before-function-paren': 'off',
    // 文件最后一行必须有一个空行
    'eol-last': 'off',
    // 禁止行尾有空格
    'no-trailing-spaces': 'off',
    // 定义过的变量必须使用
    'no-unused-vars': 1,
    // 对象的最后一个属性末尾必须有逗号
    'comma-dangle': 'off',
    // 允许用字面量{}抛出异常
    'no-throw-literal': 0,
    // 箭头函数只有一个参数的时候，必须加括号
    'arrow-parens': 'off',
    // 语句强制分号结尾
    'semi': [2, 'always'],
    // 缩进风格: 一个缩进必须用2个空格替代
    'indent': [1, 2, { 'SwitchCase': 1 }],
    // 一个let或者var只能声明一个变量
    'one-var': ['error', 'never'],
    // 禁止使用debugger
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}