升级vue-cli2到vue-cli3
# 卸载vue-cli旧版本 npm uninstall vue-cli -g # 安装新版本 npm install -g @vue/cli # 查看版本 npm vue -V 复制代码
创建项目
vue create newproject 复制代码
接下来就是小孩子做选择题了
- 选择自主配置
- 选择你要引入的初始化依赖包。咱项目里会用到这几个，按空格选中，再按一下就取消的哈~（这里我用cmd创建项目，没有用git-bash，git-bash在这里不好使，不支持选中:expressionless:。你也可以用vscode的终端来创建。）
- 路由要不要使用history模式。no。
- 预编译css语法选择哪一个，因为咱用的是elementUI，所以选择sass
- 项目代码风格规范，个人习惯问题，我习惯使用ESlint + Prettier
- 保存时自动检测代码是否合乎规范or在提交代码的时候一并格式化代码
- 配置文件的保存方式，我选择保存在package.json里
- 是不是要保存你上面的所有设置，下次创建项目默认按照这些选择来生成项目。no。
目录结构
. │ .gitignore <!-- git忽略文件配置文件 --> │ babel.config.js <!-- babel配置文件 --> │ package-lock.json <!-- 用以记录当前状态下实际安装的各个npm package的具体来源和版本号 --> │ package.json <!-- 定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据) --> │ README.md <!-- 项目介绍文件 --> │ ├─node_modules <!-- 项目依赖包 --> ├─public <!-- 放不会变动的文件（相当于vue-cli2.x中的static） --> │ favicon.ico <!-- 项目图标 --> │ index.html <!-- 设置项目的一些meta头信息，提供用于挂载 vue 节点。 --> │ └─src <!-- 存放项目源码及需要引用的资源文件。 --> │ App.vue <!-- 根组件 --> │ main.js <!-- 入口文件 --> │ router.js <!-- 路由文件 --> │ store.js <!-- vuex仓库文件 --> │ ├─assets <!-- 静态资源文件，放可能会变动的文件 --> │ logo.png │ ├─components <!-- 公共组件 --> │ HelloWorld.vue │ └─views <!-- 页面 --> About.vue Home.vue 复制代码
简单将vue-admin-template整合进项目
经过以上步骤，恭喜你，你的vuecli3项目已经初步搭建完成~~ 撒花 ~~ vue-admin-template里头的很多东西对我来说，是多余的，所以我就选择性的将我用的到的地方整合进项目里，我就不做详细解释了噢，捡整合中有点小困难的地方讲一讲。放上项目git地址，有需要的同学可以clone一下看看整合效果。
- 一个基于vuecli3和vue-admin-template改造的响应式后台管理系统
新建自己的ESlint配置文件
这个代码风格规范的问题，可以根据自己的习惯或者是公司协作开发的代码规范去修改。删除package.json下的eslintConfig配置信息，在根目录下新建.eslintrc.js文件，自定义代码规范。贴一下我习惯的规范配置：
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true,
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
rules: {
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
"vue/singleline-html-element-content-newline": "off",
"vue/multiline-html-element-content-newline":"off",
"vue/name-property-casing": ["error", "PascalCase"],
"vue/no-v-html": "off",
'accessor-pairs': 2,
'arrow-spacing': [2, {
'before': true,
'after': true
}],
'block-spacing': [2, 'always'],
'brace-style': [2, '1tbs', {
'allowSingleLine': true
}],
'camelcase': [0, {
'properties': 'always'
}],
'comma-dangle': [2, 'never'],
'comma-spacing': [2, {
'before': false,
'after': true
}],
'comma-style': [2, 'last'],
'constructor-super': 2,
'curly': [2, 'multi-line'],
'dot-location': [2, 'property'],
'eol-last': 2,
'eqeqeq': ["error", "always", {"null": "ignore"}],
'generator-star-spacing': [2, {
'before': true,
'after': true
}],
'handle-callback-err': [2, '^(err|error)