Vue学习笔记6-学习vue-admin-template（1）有了这些基础后，打算开始学习花裤衩⼤神的vue-adminplat-template项⽬，我并不打算通过git克隆下来整个源码后，通过npm install的⽅式来学习，这种⽅式感觉适合直接拿了使⽤，不太适合学习。我打算先通过vue-cli脚⼿架来建⽴⼀个空⽩项⽬，然后再逐步的把vue-admin-template中的源码，⼀步⼀步的复制到项⽬中去。
1.通过vue-cli创建项⽬
vue create -n vue-admin
不同于初次创建项⽬，我们为了了解Vue是什么，我们尽可能选择最少的插件，避免更多的困扰，来帮助我们更直观的了解Vue本⾝，⽽现在我们已经对Vue，以及那些常⽤的插件有了⼀定的了解，现在是为了⼀个可运⾏的项⽬，⽽不是在当初简单的demo，我们有必须要对脚⼿架提供的插件有⼀个基础的了解，并有选择的安装。
Babel：这是⼀个 JavaScript 转码器，当我们使⽤新的语法时，旧版本的浏览器可能就⽆法⽀持这种新的语法，通过 Babel，我们就可以添加不同的转换规则，从⽽就可以⾃动的将新版本的语法糖转换成传统的 JavaScript 语法。
TypeScript：它提供了⼀些 JavaScript 不⽀持的强语⾔特性，例如，类、接⼝、参数类型约束等等，它
使 JavaScript 写起来更像我们的 C# 或是 Java 这种强类型语⾔，当然最终还是会编译成 js ⽂件从⽽让浏览器识别出。
PWA：渐进式的 Web 应⽤，主要是利⽤提供的标准化框架，在⽹页应⽤中实现和原⽣应⽤相近的⽤户体验，让⽤户以为⾃⼰正在使⽤的是原⽣应⽤，的⼩程序其实就可以看成是⼀种 PWA 应⽤的载体。
Router：这个⼤家应该很熟悉了，在前⾯的⽂章中我们也有介绍过，是 Vue 官⽅的路由管理组件。
Vuex：⼀个 Vue.js 中的状态管理模式，这⾥的状态可以简单理解为数据。因为在使⽤ Vue 的开发中，我们会编写各种组件，有些时候，多个组件之间需要共享相同的数据，以及，各个组件之间的数据传递也⽐较复杂，所以我们需要⼀个集中式的状态管理器从⽽更好的管理数据，⽅便组件之间的通信。
CSS Pre-processors：CSS 的预处理器，可以让我们以⼀种编程的⽅式来写 CSS ⽂件，当然最终它们都会被编译器编译成标准 css ⽂件。
Linter / Foramtter：代码格式检查和格式化⼯具，主要是为了让我们的项⽬中写的代码可以更好的采⽤统⼀的风格。
Unit Testing / E2E Testing：单元测试⼯具
这次，我们选择这⼏个基本的插件 Babel,Router,Vuex,CSS Pre-processors,Linter / Foramtter。其中CSS Pre-processors提供4个选择,dart-sass,node-sass,less,stylus，这⾥我暂时选择了dart-sass。⽽Linter / Foramtter 也提供了4种选择，都是基于ESLint的不同模式，error prevention only（只提醒错误）, Airbnb config,Standard config,Prettier。Airbnb是github上Star最多的，⽽Standard特点是⽆分号，不⽀持修改规则，Prettier的特点是⼀键改变代码风格，⽽不需要改变开发风格，⽽error only则是最基础部分，表⽰只校验代码质量，提出错误部分。毕竟是初学者，先选择error only，后期可以再追加配置的。
2. 配置ESLint相关
我们使⽤Vscode来进⾏编辑开发Vue项⽬，需要在Vscode中追加这⼏个相关的扩展，Vue 2 Snippets,ESLint,Vuter,AutoFix Toggle，来调整⼀下Vscode的⾸选项配置中，打开setting.json⽂件，追加相关配置到json⽂件中
// setting.json
{
.....之前原本的配置，新增部分可以直接追加在后⾯
//打开⽂件不覆盖
"ablePreview": false,
"abled": false, //关闭快速预览
// "files.autoSave": "afterDelay", //打开⾃动保存
"editor.formatOnSave": true, //每次保存⾃动格式化
// 每次保存的时候将代码按eslint格式进⾏修复
"deActionsOnSave": {
"source.fixAll.eslint": true
},
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后⾯的括号之间加个空格
// px to rem 扩展配置
"px-to-rem.px-per-rem": 100, //rem适配
//由于prettier不能格式化vue⽂件template 所以使⽤js-beautify-html格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 120,
"wrap_attributes": "auto", // "force-aligned"属性强制折⾏对齐
"end_with_newline": false
},
"prettier": {
"singleQuote": true, // 单引号替代双引号
"semi": false // 结尾不需要;
}
}
"editor.tabSize": 2,
"eslint.run": "onSave",
}
之后，调整eslint在项⽬中的配置⽂件.eslintrc.js，调整配置如下：
// .eslintrc.js
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'eslint:recommended'
],
// required to lint *.vue files
plugins: ['vue'],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': v.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': v.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
追加eslint的ignore⽂件，在.eslintrc.js⽂件同⽬录下创建.eslintignore⽂件
# .eslintignore
build/*.js
src/assets
public
dist
在vscode中，vuter插件默认的风格是prettier的，⽽prettier风格在有些地⽅是会和eslint发⽣冲突的，我们需要在项⽬根⽬录下补充
⼀个.prettierrc的配置⽂件
// .prettierrc
{
"printWidth": 300,
"singleQuote" : true,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"trailingComma": "none",
"bracketSpacing": true,
"arrowParens": "avoid"
}
如果你不想使⽤ ESLint 校验（不推荐取消），只要到 ⽂件。 进⾏如下设置 lintOnSave: false 即可。fig.js⽂件在下⾯会有
说明。
3.安装Package
完成了ESLint的相关配置后，下⼀步就需要把⼏个Vue开发常⽤的插件包安装进去，因为是学习vue-admin-template项⽬的源码，我
们就尽可能参考源码的package.json⽂件中的插件包。这⾥通过⼿⼯指令安装，⽽不是copy整个packa
ge.json⽂件之后⽤npm install⽅
式，也是为了进⼀步熟悉package包的安装区别。
> npm i -S axios element-ui normalize.css nprogress js-cookie path-to-regexp --registry=registry.
> npm i -D autoprefixer babel-plugin-dynamic-import-node chalk connect mockjs runjs serve-static svg-sprite-loader svgo --registry=registry. 同时参考源码的package.json⽂件，补充package.json⽂件中的内容，最终package.json内容如下：
// package.json
{
"name": "adminplat-vue",
"version": "0.1.0",
"description": "A vue admin study Pan's vue-admin-template source ",
"author": "Myron.Maoyz",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.0",
"core-js": "^3.6.5",
"element-ui": "^2.14.1",
"js-cookie": "^2.2.1",
"normalize.css": "^8.0.1",
"nprogress": "^0.2.0",
"path-to-regexp": "^6.2.0",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"autoprefixer": "^10.0.2",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"babel-plugin-dynamic-import-node": "^2.3.3",
"chalk": "^4.1.0",
"connect": "^3.7.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"mockjs": "^1.1.0",
"runjs": "^4.4.2",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"serve-static": "^1.14.1",
"svg-sprite-loader": "^5.0.0",
"svgo": "^1.3.2",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"engines": {
"node": ">=14.13",
"npm": ">= 6.14.8"
},
"license": "MIT"
}
其中engines下的node和npm可以根据⾃⼰搭建的环境来填写，忘记了的话，可以直接通过node -v以及npm -v来获取版本号
4.添加配置⽂件
.
eslintrc.js .eslintignore ⽂件，通常情况下，在你安装了eslint插件后，就会默认出现，没有的话，就在项⽬根⽬录下直接创建⼀个即
可。这⾥我们全盟copy源码的对应配置⽂件，也可以直接就删除这两个⽂件来关闭eslint插件。// .eslintrc.js
root: true,
env: {
browser: true,
node: true,
es6: true,
},
extends: [
'plugin:vue/essential',
'eslint:recommended'
],
// required to lint *.vue files
plugins: ['vue'],
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
rules: {
"vue/max-attributes-per-line": 0,
"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)$'],
'indent': [2, 2, {
'SwitchCase': 1
}],
'jsx-quotes': [2, 'prefer-single'],
vue element admin'key-spacing': [2, {
'beforeColon': false,
'afterColon': true
}],
'keyword-spacing': [2, {
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论