背景
最近正在做一个项目,使用 Vue-Cli 3.x 新搭建了一个框架
步骤
使用 Vue-Cli 初始化项目
vue create project-name


为新项目引入 Element-UI 框架
vue add element
配置项目的 .eslintrc.js
和 vue.config.js
// .eslintrc.js
module.exports = {
"parser": "babel-eslint",
"extends": [
"eslint-config-airbnb-base"
],
"env": {
"mocha": true
},
"globals": {
"runTestCases": true,
"reverseCases": true,
"document": false,
"require": false,
"window": false,
"fetch": false,
"FormData": false
},
"rules": {
"callback-return": ["warn"],
"no-underscore-dangle": ["error", {"allow": ["_doc","_id"]}],
"no-trailing-spaces": ["error", { "ignoreComments": true }],
"quote-props": "off",
"class-methods-use-this": "off",
"no-undef": "off",
"indent": ["error", 2],
"comma-dangle": ["error", "never"],
"max-len": ["error", 120],
"import/no-unresolved": "off"
}
}
// vue.config.js
module.exports = {
devServer: {
open: true,
port: 9000
},
configureWebpack: {
resolve: {
alias: {
'app': '@/app',
'common': '@/common',
'components': '@/components'
}
}
},
// Vue-Cli works with webpack
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].template = './src/app/index.html';
args[0].favicon = './src/app/favicon.ico';
return args
})
}
};
修改文件目录

网友评论