vue-cli3从0到1搭建一个vue项目以及一些基础配置

女爷i 2023-10-11 14:11 11阅读 0赞

vue-cli3已经出来有段时间了，以前只用vue-cli2搭建过项目，最近跟大家一起使用vue-cli3一起来搭建一个项目试试（第一次搭建大家一起尝试，求指点）  
vue-cli3虽然改的更简便了，但是创建项目流程还是没变的，接下来我们来一起先创建一个项目

一：安装node  
node安装大家可以参照官网去看，需要版本 >=8.9

二：安装vue-cli3和淘宝镜像cnpm  
安装vue-cli3(npm install -g @vue/cli),  
安装淘宝镜像（npm install -g cnpm --registry=https://registry.npm.taobao.org）

三：创建项目  
进入我们需要创建项目的目录下，然后打开控制器执行：vue create my-project 然后在回车，我们就会看到下面界面  
在这里插入图片描述

按键盘上下键可以选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了，我这就是用手动去选择一个配置项  
接下来就会出现很对选项我们自主选择

选择配置，看个人项目需求  
注意，空格键是选中与取消，A键是全选  
TypeScript 支持使用 TypeScript 书写源码  
Progressive Web App (PWA) Support PWA 支持。  
Router 支持 vue-router 。  
Vuex 支持 vuex 。  
CSS Pre-processors 支持 CSS 预处理器。  
Linter / Formatter 支持代码风格检查和格式化。  
Unit Testing 支持单元测试。  
E2E Testing 支持 E2E 测试。  
选好之后我们再回车确定，就到了下图

会让我们确定路由模式，我选择是Yes，然后是css预处理器选择，我选择的是saas大家可以根据自己公司项目去选择。然后点确定

这是语法检测，我选择ESLint + Prettier回车后，选择语法检测时机。

选择语法检查方式，我自己选择保存就检测  
第一个是保存检测，第二个是fix和commit的时候检测，再回车

单元测试，我选择了Mocha，然后继续回车

配置文件存放地方  
第一个是独立文件夹位置，第二个是在package.json文件里，继续回车

我们选择好后接下来我们就回车就等待下载就好了

装好后，启动  
cd my-project // 进入到项目根目录  
npm run serve // 启动项目

启动后我们可以看到默认项目  
这杨我们就把初始项目搭建起来了，接下来我们就是在这个初始项目的基础上去进行优化和加上我们配置项

四：配置文件添加  
1，.browserslistrc：设置浏览器的兼容

" >1%" :代表着全球超过1%人使用的浏览器  
“last 2 versions” : 表示所有浏览器兼容到最后两个版本  
Android > 4.4.1：安卓版本大于4.4.1

2，.editorconfig:设置编码规范

3，.eslintrc eslint配置和rule设定  
规则级别  
"off"或者0，不启用这个规则

"warn"或者1，出现问题会有警告

"error"或者2，出现问题会报错

关闭ESLint检测

配置eslintrc.js  
rules: \{  
"no-console": process.env.NODE\_ENV === "production" ? "warn" : "off",  
"no-debugger": process.env.NODE\_ENV === "production" ? "warn" : "off",  
// 不需要  
"space-before-function-paren": 0, // 函数定义时括号前面要不要有空格  
"eol-last": 0, // 文件以单一的换行符结束  
"no-extra-semi": 0, // 可以多余的冒号  
"semi": 0, // 语句可以不需要分号结尾  
"eqeqeq": 0, // 必须使用全等  
"one-var": 0, // 连续声明  
"no-undef": 0, // 可以 有未定义的变量

// 警告  
"no-extra-boolean-cast": 1, // 不必要的bool转换  
"no-extra-parens": 1, // 非必要的括号  
"no-empty": 1, // 块语句中的内容不能为空  
"no-use-before-define": \[1, "nofunc"\], // 未定义前不能使用  
"complexity": \[1, 10\], // 循环复杂度  
"no-unused-vars": 1, // 不能有声明后未被使用的变量或参数  
// vue  
"flow-vars/define-flow-type": 1,  
"flow-vars/use-flow-type": 1,

// 错误  
"comma-dangle": \[2, "never"\], // 对象字面量项尾不能有逗号  
"no-debugger": 2, // 禁止使用debugger  
"no-constant-condition": 2, // 禁止在条件中使用常量表达式 if(true) if(1)  
"no-dupe-args": 2, // 函数参数不能重复  
"no-dupe-keys": 2, // 在创建对象字面量时不允许键重复 \{a:1,a:1\}  
"no-duplicate-case": 2, // switch中的case标签不能重复  
"no-empty-character-class": 2, // 正则表达式中的\[\]内容不能为空  
"no-invalid-regexp": 2, // 禁止无效的正则表达式  
"no-func-assign": 2, // 禁止重复的函数声明  
"valid-typeof": 2, // 必须使用合法的typeof的值  
"no-unreachable": 2, // 不能有无法执行的代码  
"no-unexpected-multiline": 2, // 避免多行表达式  
"no-sparse-arrays": 2, // 禁止稀疏数组， \[1,,2\]  
"no-shadow-restricted-names": 2, // 严格模式中规定的限制标识符不能作为声明时的变量名使用  
"no-cond-assign": 2, // 禁止在条件表达式中使用赋值语句  
"no-native-reassign": 2, // 不能重写native对象

// 代码风格  
"no-else-return": 1, // 如果if语句里面有return,后面不能跟else语句  
"no-multi-spaces": 1, // 不能用多余的空格  
"key-spacing": \[1, \{ // 对象字面量中冒号的前后空格  
"beforeColon": false,  
"afterColon": true  
\}\],  
"block-scoped-var": 2, // 块语句中使用var  
"consistent-return": 2, // return 后面是否允许省略  
"accessor-pairs": 2, // 在对象中使用getter/setter  
"dot-location": \[2, "property"\], // 对象访问符的位置，换行的时候在行首还是行尾  
"no-lone-blocks": 2, // 禁止不必要的嵌套块  
"no-labels": 2, // 禁止标签声明  
"no-extend-native": 2, // 禁止扩展native对象  
"no-floating-decimal": 2, // 禁止省略浮点数中的0 .5 3.  
"no-loop-func": 2, // 禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以）  
"no-new-func": 2, // 禁止使用new Function  
"no-self-compare": 2, // 不能比较自身  
"no-sequences": 2, // 禁止使用逗号运算符  
"no-throw-literal": 2, // 禁止抛出字面量错误 throw "error";  
"no-return-assign": \[2, "always"\], // return 语句中不能有赋值表达式  
"no-redeclare": \[2, \{ // 禁止重复声明变量  
"builtinGlobals": true  
\}\],  
"no-unused-expressions": \[2, \{ // 禁止无用的表达式  
"allowShortCircuit": true,  
"allowTernary": true  
\}\],  
"no-useless-call": 2, // 禁止不必要的call和apply  
"no-useless-concat": 2,  
"no-void": 2, // 禁用void操作符  
"no-with": 2, // 禁用with  
"space-infix-ops": 2, // 中缀操作符周围要不要有空格  
"valid-jsdoc": \[2, \{ // jsdoc规则  
"requireParamDescription": true,  
"requireReturnDescription": true  
\}\],  
"no-warning-comments": \[2, \{ // 不能有警告备注  
"terms": \["todo", "fixme", "any other term"\],  
"location": "anywhere"  
\}\],  
"curly": 1, // 必须使用 if()\{\} 中的\{\}

// common js  
"no-duplicate-imports": 1  
\},  
  
常用的配置项  
'rules': \{  
"comma-dangle": \["error", "never"\], //是否允许对象中出现结尾逗号  
"no-cond-assign": 2, //条件语句的条件中不允许出现赋值运算符  
"no-console": 2, //不允许出现console语句  
"no-constant-condition": 2, //条件语句的条件中不允许出现恒定不变的量  
"no-control-regex": 2, //正则表达式中不允许出现控制字符  
"no-debugger": 2, //不允许出现debugger语句  
"no-dupe-args": 2, //函数定义的时候不允许出现重复的参数  
"no-dupe-keys": 2, //对象中不允许出现重复的键  
"no-duplicate-case": 2, //switch语句中不允许出现重复的case标签  
"no-empty": 2, //不允许出现空的代码块  
"no-empty-character-class": 2, //正则表达式中不允许出现空的字符组  
"no-ex-assign": 2, //在try catch语句中不允许重新分配异常变量  
"no-extra-boolean-cast": 2, //不允许出现不必要的布尔值转换  
"no-extra-parens": 0, //不允许出现不必要的圆括号  
"no-extra-semi": 2, //不允许出现不必要的分号  
"no-func-assign": 2, //不允许重新分配函数声明  
"no-inner-declarations": \["error", "functions"\], //不允许在嵌套代码块里声明函数  
"no-invalid-regexp": 2, //不允许在RegExp构造函数里出现无效的正则表达式  
"no-irregular-whitespace": 2, //不允许出现不规则的空格  
"no-negated-in-lhs": 2, //不允许在in表达式语句中对最左边的运算数使用取反操作  
"no-obj-calls": 2, //不允许把全局对象属性当做函数来调用  
"no-regex-spaces": 2, //正则表达式中不允许出现多个连续空格  
"quote-props": 2, //对象中的属性名是否需要用引号引起来  
"no-sparse-arrays": 2, //数组中不允许出现空位置  
"no-unreachable": 2, //在return，throw，continue，break语句后不允许出现不可能到达的语句  
"use-isnan": 2, //要求检查NaN的时候使用isNaN()  
"valid-jsdoc": \["error", \{  
"requireReturn": false,  
"requireParamDescription": false,  
"requireReturnDescription": true  
\}\], //强制JSDoc注释  
"valid-typeof": \["error", \{  
"requireStringLiterals": true  
\}\], //在使用typeof表达式比较的时候强制使用有效的字符串  
"block-scoped-var": 2, //将变量声明放在合适的代码块里  
"complexity": 0, //限制条件语句的复杂度  
"consistent-return": 2, //无论有没有返回值都强制要求return语句返回一个值  
"curly": \["error", "all"\], //强制使用花括号的风格  
"default-case": 0, //在switch语句中需要有default语句  
"dot-notation": \["error", \{"allowKeywords": false, "allowPattern": ""\}\], //获取对象属性的时候使用点号  
"eqeqeq": \["error", "smart"\], //比较的时候使用严格等于  
"no-alert": 1, //不允许使用alert，confirm，prompt语句  
"no-caller": 2, //不允许使用arguments.callee和arguments.caller属性  
"guard-for-in": 0, //监视for in循环，防止出现不可预料的情况  
"no-div-regex": 2, //不能使用看起来像除法的正则表达式  
"no-else-return": 0, //如果if语句有return，else里的return不用放在else里  
"no-labels": \["error", \{  
"allowLoop": false,  
"allowSwitch": false  
\}\], //不允许标签语句  
"no-eq-null": 2, //不允许对null用==或者!=  
"no-eval": 2, //不允许使用eval()  
"no-extend-native": 2, //不允许扩展原生对象  
"no-extra-bind": 2, //不允许不必要的函数绑定  
"no-fallthrough": 2, //不允许switch按顺序全部执行所有case  
"no-floating-decimal": 2, //不允许浮点数缺失数字  
"no-implied-eval": 2, //不允许使用隐式eval()  
"no-iterator": 2, //不允许使用\_\_iterator\_\_属性  
"no-lone-blocks": 2, //不允许不必要的嵌套代码块  
"no-loop-func": 2, //不允许在循环语句中进行函数声明  
"no-multi-spaces": 2, //不允许出现多余的空格  
"no-multi-str": 2, //不允许用\\来让字符串换行  
"no-global-assign": 2, //不允许重新分配原生对象  
"no-new": 2, //不允许new一个实例后不赋值或者不比较  
"no-new-func": 2, //不允许使用new Function  
"no-new-wrappers": 2, //不允许使用new String，Number和Boolean对象  
"no-octal": 2, //不允许使用八进制字面值  
"no-octal-escape": 2, //不允许使用八进制转义序列  
"no-param-reassign": 0, //不允许重新分配函数参数"no-proto": 2, //不允许使用\_\_proto\_\_属性  
"no-redeclare": 2, //不允许变量重复声明  
"no-return-assign": 2, //不允许在return语句中使用分配语句  
"no-script-url": 2, //不允许使用javascript:void(0)  
"no-self-compare": 2, //不允许自己和自己比较  
"no-sequences": 2, //不允许使用逗号表达式  
"no-throw-literal": 2, //不允许抛出字面量错误 throw "error"  
"no-unused-expressions": 2, //不允许无用的表达式  
"no-void": 2, //不允许void操作符  
"no-warning-comments": \[1, \{"terms": \["todo", "fixme", "any other term"\]\}\], //不允许警告备注  
"no-with": 2, //不允许使用with语句  
"radix": 1, //使用parseInt时强制使用基数来指定是十进制还是其他进制  
"vars-on-top": 0, //var必须放在作用域顶部  
"wrap-iife": \[2, "any"\], //立即执行表达式的括号风格  
"yoda": \[2, "never", \{"exceptRange": true\}\], //不允许在if条件中使用yoda条件  
"strict": \[2, "function"\], //使用严格模式  
"no-catch-shadow": 2, //不允许try catch语句接受的err变量与外部变量重名"no-delete-var": 2, //不允许使用delete操作符  
"no-label-var": 2, //不允许标签和变量同名  
"no-shadow": 2, //外部作用域中的变量不能与它所包含的作用域中的变量或参数同名  
"no-shadow-restricted-names": 2, //js关键字和保留字不能作为函数名或者变量名  
"no-undef": 2, //不允许未声明的变量  
"no-undef-init": 2, //不允许初始化变量时给变量赋值undefined  
"no-undefined": 2, //不允许把undefined当做标识符使用  
"no-unused-vars": \[2, \{"vars": "all", "args": "after-used"\}\], //不允许有声明后未使用的变量或者参数  
"no-use-before-define": \[2, "nofunc"\], //不允许在未定义之前就使用变量"indent": 2, //强制一致的缩进风格  
"brace-style": \[2, "1tbs", \{ "allowSingleLine": false\}\], //大括号风格  
"camelcase": \[2, \{"properties": "never"\}\], //强制驼峰命名规则  
"comma-style": \[2, "last"\], //逗号风格  
"consistent-this": \[0, "self"\], //当获取当前环境的this是用一样的风格  
"eol-last": 2, //文件以换行符结束  
"func-names": 0, //函数表达式必须有名字  
"func-style": 0, //函数风格，规定只能使用函数声明或者函数表达式  
"key-spacing": \[2, \{"beforeColon": false, "afterColon": true\}\], //对象字面量中冒号的前后空格  
"max-nested-callbacks": 0, //回调嵌套深度  
"new-cap": \[2, \{"newIsCap": true, "capIsNew": false\}\], //构造函数名字首字母要大写  
"new-parens": 2, //new时构造函数必须有小括号  
"newline-after-var": 0, //变量声明后必须空一行  
"no-array-constructor": 2, //不允许使用数组构造器  
"no-inline-comments": 0, //不允许行内注释  
"no-lonely-if": 0, //不允许else语句内只有if语句  
"no-mixed-spaces-and-tabs": \[2, "smart-tabs"\], //不允许混用tab和空格  
"no-multiple-empty-lines": \[2, \{"max": 2\}\], //空行最多不能超过两行  
"no-nested-ternary": 2, //不允许使用嵌套的三目运算符  
"no-new-object": 2, //禁止使用new Object()  
"fun-call-spacing": 2, //函数调用时，函数名与()之间不能有空格  
"no-ternary": 0, //不允许使用三目运算符  
"no-trailing-spaces": 2, //一行最后不允许有空格  
"no-underscore-dangle": 2, //不允许标识符以下划线开头  
"no-extra-parens": 0, //不允许出现多余的括号  
"one-var": 0, //强制变量声明放在一起  
"operator-assignment": 0, //赋值运算符的风格  
"padded-blocks": \[2, "never"\], //块内行首行尾是否空行  
"quote-props": 0, //对象字面量中属性名加引号  
"quotes": \[1, "single", "avoid-escape"\], //引号风格  
"semi": \[2, "always"\], //强制语句分号结尾  
"semi-spacing": \[2, \{"before": false, "after": true\}\], //分后前后空格  
"sort-vars": 0, //变量声明时排序  
"space-before-blocks": \[2, "always"\], //块前的空格  
"space-before-function-paren": \[2, \{"anonymous": "always", "named": "never"\}\], //函数定义时括号前的空格  
"space-infix-ops": \[2, \{"int32Hint": true\}\], //操作符周围的空格  
"keyword-spacing": 2, //关键字前后的空格  
"space-unary-ops": \[2, \{ "words": true, "nonwords": false\}\], //一元运算符前后不要加空格  
"wrap-regex": 2, //正则表达式字面量用括号括起来  
"no-var": 0, //使用let和const代替var  
"generator-star-spacing": \[2, "both"\], //生成器函数前后空格  
"max-depth": 0, //嵌套块深度  
"max-len": 0, //一行最大长度，单位为字符  
"max-params": 0, //函数最多能有多少个参数  
"max-statements": 0, //函数内最多有几个声明  
"no-bitwise": 0, //不允许使用位运算符  
"no-plusplus": 0 //不允许使用++ --运算符  
\}  
  
4,.gitignore vue-cli项目提交时设置Git忽略提交文件  
在使用Git的过程中，我们喜欢有的文件比如日志，临时文件，编译的中间文件等不要提交到代码仓库，这时就要设置相应的忽略规则，来忽略这些文件的提交。  
一般使用默认规则就可以了，如果有特殊需要处理的，请参考文档：https://git-scm.com/docs/gitignore

5, .stylelintignore和.stylelintrc.js CSS检测规则

6， .babel-config.js 插件按需引入

7，postcss.config.js postcss的配置文件  
8，vue.config.js  
因为vue-cli3相比vue-cli2而言webpack的配置均被隐藏了，当你需要覆盖原有的配置时，则需要在项目的根目录下，新建vue.config.js文件，来配置新的配置。

// web移动端缓存  
const AppCachePlugin = require('appcache-webpack-plugin')  
// 外部配置文件  
const config = require('./config')  
// 时间插件  
const moment = require('moment')  
//webpack中引入的path\[require('path')\]是node.js内置的package，用来处理路径的  
const path = require('path')  
// 一个浏览器调试工具，可以在保存代码的时候，浏览器自动刷新界面  
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')  
// 引入webpack  
const webpack = require('webpack');  
// 定义个数组来收集需要注入要node模块的插件  
const plugins = \[\]  
// 常量  
const assetsDir = 'css'  
// posix兼容方式处理路径 Node.js path 模块提供了一些用于处理文件路径的小工具  
const posixJoin = \_path => path.posix.join(assetsDir, \_path)  
const isProd = process.env.NODE\_ENV === 'production'  
// 在生产环境上  
if (process.env.NODE\_ENV === 'production') \{  
plugins.push(new AppCachePlugin(\{  
exclude: \[/.\*\\.json$/\],  
network: \['\*'\],  
output: 'manifest.appcache'  
\}))  
plugins.push(new webpack.ProvidePlugin(\{  
$:"jquery",  
jQuery:"jquery",  
"windows.jQuery":"jquery"  
\}))  
\}  
// 本地开发环境  
if (process.env.NODE\_ENV === 'development') \{  
plugins.push(new BrowserSyncPlugin(  
// BrowserSync options  
\{  
// browse to http://localhost:3000/ during development  
host: 'localhost',  
port: 3000,  
// proxy the Webpack Dev Server endpoint  
// (which should be serving on http://localhost:3100/)  
// through BrowserSync  
proxy: 'http://localhost:8080/'  
// server: \{ baseDir: \['dist'\] \}  
\},  
// plugin options  
\{  
// prevent BrowserSync from reloading the page  
// and let Webpack Dev Server take care of this  
reload: true  
\}  
))  
plugins.push(new webpack.ProvidePlugin(\{  
$:"jquery",  
jQuery:"jquery",  
"windows.jQuery":"jquery"  
\}))  
\}

/\*\*  
\* 项目发布版本信息：  
\* 详情见config.js文件  
\*/  
const date = moment().format('YYMMDDHH')  
let versionNumber = ''  
if (config\['VERSION\_NUMBER'\] !== '') \{  
versionNumber = config\['VERSION\_NUMBER'\] + '.'  
\}  
let projectAbber = ''  
if (config\['PROJECT\_ABBRE'\] !== '') \{  
projectAbber = config\['PROJECT\_ABBRE'\] + '.'  
\}  
let versionFlag = ''  
if (config\['VERSION\_FLAG'\] !== '') \{  
versionFlag = '.' + config\['VERSION\_FLAG'\]  
\}  
const version = versionNumber + projectAbber + date + versionFlag

// 具体配置惨考文档啊  
module.exports = \{  
// baseUrl type:\{string\} default:'/'  
// 将部署应用程序的基本URL  
// 将部署应用程序的基本URL。  
// 默认情况下，Vue CLI假设您的应用程序将部署在域的根目录下。  
// https://www.my-app.com/。如果应用程序部署在子路径上，则需要使用此选项指定子路径。例如，如果您的应用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.  
// baseUrl: process.env.NODE\_ENV === "production" ? "/board/" : "/",

css: \{  
//css预设器配置项  
loaderOptions: \{  
postcss: \{  
config: \{  
path: \_\_dirname  
\}  
\},  
sass: \{  
prependData: \`@import "@/views/nursing\_department/styles/var.scss";\`  
\}  
\},  
// 增加版本号  
extract: !isProd ? false : \{  
filename: posixJoin(\`\[name\].$\{version\}.css\`),  
chunkFilename: posixJoin(\`\[name\].$\{version\}.css\`)  
\}  
\},  
// webpack配置，值位对象时会合并配置，为方法时会改写配置  
configureWebpack: \{  
resolve: \{  
symlinks: false,  
alias: \{  
'vue$': 'vue/dist/vue.esm.js'  
\}  
\},  
// 输出重构 打包编译后的 文件名称 【模块名称.版本号】  
output: \{  
filename: \`\[name\].$\{version\}.js\`,  
chunkFilename: \`\[name\].$\{version\}.js\`  
\},  
plugins: plugins,  
name: version  
\},

// outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'  
// outputDir: 'dist',

// pages:\{ type:Object,Default:undfind \}  
/\*  
构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一  
个对象，其中键是条目的名称，而该值要么是指定其条目、模板和文件名的对象，要么是指定其条目  
的字符串，  
注意：请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的  
\*/  
pages: \{  
index: \{  
entry: 'src/main.js',  
template: 'public/index.html',  
filename: 'index.html'  
\},  
version: 'src/version/main.js'  
\},  
// when using the entry-only string format,  
// template is inferred to be \`public/subpage.html\`  
// and falls back to \`public/index.html\` if not found.  
// Output filename is inferred to be \`subpage.html\`.  
// subpage: 'src/subpage/main.js'  
// \},

// lintOnSave：\{ type:Boolean default:true \} 问你是否使用eslint  
lintOnSave: true,

// productionSourceMap：\{ type:Bollean,default:true \} 生产源映射  
// 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建  
productionSourceMap: false,

// devServer:\{type:Object\} 3个属性host,port,https  
// 它支持webPack-dev-server的所有选项  
devServer: \{  
port: config\['SERVER\_PORT'\], // 端口号  
host: '0.0.0.0',  
https: false, // https:\{type:Boolean\}  
open: true, // 配置自动启动浏览器  
// proxy: 'http://localhost:8080' // 配置跨域处理,只有一个代理  
proxy: \{  
'/api': \{  
target: config\['PROXY\_TARGET'\],  
changeOrigin: false,  
pathRewrite: \{  
'^/api': '' // 这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可  
\}  
\}  
\}  
\}  
\}