安装cli3

  1. 查看vue cli版本 vue —version
  2. 要求nodejs版本8.9以上
  3. 如安装了旧版，使用npm uninstall vue-cli -g卸载旧版本
  4. 安装vue-cli3.0 npm install -g @vue/cli 或者 yarn global add @vue/cli

创建项目

  1. vue create xxxxx
  2. 选择安装配置选项 （多选）
  • css预编译使用Sass/SCSS
  • 代码检查使用 Standard 保存时检查 Lint on save
  • 单元测试工具 Jest(一般不需要)
  • Babel, PostCSS, ESLint配置文件单独保存到配置文件中

安装插件

H5的话 需要自适应

  1. 安装 flexible和 postcss-pxtorem（命令行安装）
  1. npm i postcss-pxtorem -S
  2. npm i amfe-flexible -S
  1. 引入amfe-flexible
    在项目入口文件main.js 中引入lib-flexible import 'amfe-flexible'
  2. 配置postcss-pxtorem
    新建 .postcssrc.js
  1. module.exports = {
  2.   plugins: {
  3.     autoprefixer: {},
  4.     'postcss-pxtorem': {
  5.       rootValue: 37.5,
  6.       unitPrecision: 5,
  7.       propList: ['*'],
  8.       selectorBlackList: ['.weui-', '.vux-', '.van-', '.nopost-'],
  9.       replace: true,
  10.       mediaQuery: false,
  11.       minPixelValue: 0,
  12.     },
  13.   },
  14. }

基本配置

  • axios： npm i axios -S
  • vant： UI 框架 npm i vant -S
  • 样式重置：npm i normalize.css —save-dev main.js 中引用 import ‘normalize.css’

    ESlint+vscode

    首先安装 ESlint 然后 配置 
  1. {
  2.   "files.autoSave": "off",
  3.   "eslint.validate": [
  4.     "javascript",
  5.     "javascriptreact",
  6.     "vue-html",
  7.     {
  8.       "language": "vue",
  9.       "autoFix": true
  10.     }
  11.   ],
  12.   "eslint.run": "onSave",
  13.   "eslint.autoFixOnSave": true
  14. }

最后 新建.eslintrc.js，我采用 vue-element-admin

  • 取消 Eslint :如果你不想使用 ESLint 校验（不推荐取消），只要找到 vue.config.js 文件。 进行如下设置 lintOnSave: false 即可。