这一篇主要是搭建基础项目，完全空的项目，还有一些基本配置
本项目使用mac 开发环境，所以做个参考，window其实差别不大
关键词：
- npm
- vue-cli 3
- vscode配置
1. 电脑环境
怎么安装node，vuecli3这里就不做详细的介绍了，大家自学一下，不难。（mac使用brew install node之后，直接改源：npm config set registry https://registry.npm.taobao.org即可，不要下载cnpm，不要用cnpm，不要用cnpm）
2. vscode配置
这里主要是编辑环境的一些配置，格式化之类的。推荐的工具必然是万能的vscode，
我的插件列表：
vue项目中的几个关键插件为：
贴出我的setting配置：
进入设置之后，点击右上角的{}进入编辑界面
vscode配置
{
// 图标
"workbench.iconTheme": "material-icon-theme",
//git自动拉新
"git.autofetch": true,
// "editor.suggestSelection": "first",
// "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html",
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
{
"language": "javascript",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
// prettier 配置属性说明:https://segmentfault.com/a/1190000012909159
// #让prettier使用eslint的代码格式进行校验
// 去掉vue中的;号:https://juejin.im/post/5a9fae575188255574593aeb
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// 换行的阈值
"prettier.printWidth": 140,
// 开启换行
"prettier.proseWrap": "preserve",
// #使用单引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.validation.template": false,
"vetur.format.options.tabSize": 4,
"vetur.format.options.useTabs": false,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
// "vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
// vue 中 对属性进行换行。
// - auto: 仅在超出行长度时才对属性进行换行。
// - force: 对除第一个属性外的其他每个属性进行换行。
// - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
// - force-expand-multiline: 对每个属性进行换行。
// - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
"workbench.startupEditor": "newUntitledFile",
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
// 窗口失去焦点的时候,保存全部文件
"files.autoSave": "onWindowChange"
}
这样设置之后，如果还要在vue项目中启用eslint和prettier，最好加一下配置，稍后我们构建了项目会说明的。因为目前编辑器和插件都不怎么很好的识别vue，特别是对template不友好，可能有插件冲突的地方，eslint需要额外的设置一下，稍后也会列出解决办法
3. 搭建项目
3.1 创建
命令行：vue create my-demo，vuecli3的新建项目和2的不同，如果需要使用2的命令，可以npm i -g @vue/cli-init（ i 是install的简写，-g是-global简写），参考：官网
3.2 选择默认default，下一步会自动安装构建项目
3.3 进入项目，使用vscode打开
linyundeMacBook-Pro:my ly$ cd my-demo/
linyundeMacBook-Pro:my-demo ly$ ls
README.md node_modules package.json src
babel.config.js package-lock.json public
linyundeMacBook-Pro:my-demo ly$ code .
code .命令打开vscode配置：vscode中，shift + command + p 打开快捷栏
打开后的界面左侧目录结构
4. 配置
4.1 vue.config.js
手动添加vue.config.js到项目根目录，与README.md同级，内容如下：
/** vue配置文件 */
const path = require('path')
// 生成页面之后,顶部title的名称,随便写
const name = 'my-demo'
// 项目端口, 本地测试环境的端口
const port = 8082
module.exports = {
publicPath: '/', //部署应用包时的基本 URL,默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
outputDir: 'dist', //当运行 vue-cli-service build 时生成的生产环境构建文件的目录
assetsDir: 'static/vue', // 默认为空,放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。也就是说,如果使用build构建项目,name静态资源放在哪个目录下, 这里设置为放在:/dist/static
indexPath: 'vue.html', //指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。使用build构建项目,首页的存放地点
filenameHashing: true, //生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
lintOnSave: process.env.NODE_ENV === 'development', // 在开发时,是否每次保存时,使用eslint检查代码.[如果直接设置为true,则开发,生产模式都会启用的]
// productionSourceMap:false,//不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
devServer: {
// 支持所有的webpack的devServer参数
port: port, // 端口号
open: true, // 启动项目,打开默认浏览器 Tells dev-server to open the browser after server had been started. Set it to true to open your default browser.
overlay: {
// 报错时,在浏览器弹出一个遮罩,展示错误.
warnings: false,
errors: true
},
// 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。
// 这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
proxy: {
// process.env 这个是node的内容, 不需要require,全局生效, process.env是获取当前环境的用户信息.
'/vueapi': {
// 测试环境
target: 'http://localhost:8081/', // 本机接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/vueapi': 'vueapi' //需要rewrite重写的,
}
}
}
},
configureWebpack: {
name: name, //
resolve: {
alias: {
// 别名设置, 比如原来访问:import Utility from './components/HelloWorld';现在可以简写为:import Utility from '@/components/HelloWorld'
'@': path.resolve('src'), // 指代src根目录
}
}
}
}
4.2 .prettierrc.json
3个插件兼容性还是有小问题，比如结尾的逗号，分号，和单引号【我的项目是使用单引号，不允许多余的逗号，结尾不要分号】
根目录创建文件：.prettierrc.json，内容如下：
{
"singleQuote": true,
"semi": false
}
配置使用单引号和不允许分号。安装完插件最好vscode重启一下
4.3 package.json
打开package.json文件，修改几个地方：
4.3.1 scripts节点
原来的：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
修改：
"scripts": {
"serve": "cross-env NODE_ENV=development vue-cli-service serve",
"build": "cross-env NODE_ENV=production vue-cli-service build",
"lint": "vue-cli-service lint"
},
这里使用了 cross-env 插件，我们安装一下，主要是用来切换开发环境测试的，vscode中 shift + control + ~ 打开终端。
linyundeMacBook-Pro:my-demo ly$ npm install --save-dev cross-env
+ [email protected]
added 1 package from 1 contributor and audited 23923 packages in 6.729s
found 0 vulnerabilities
4.3.2 eslintConfig节点
新的，主要是格式化的一些设置，eslint的设置，【如果你使用vscode的格式化tab应该默认为2个空格，我修改为4个了的，自己改一下】：
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"eslint:recommended",
"plugin:vue/essential"
],
"plugins": [
"vue"
],
"rules": {
"semi": 0,
"indent": [
"error",
4
],
"vue/html-indent": [
"error",
4
],
"vue/script-indent": [
"error",
4
],
"vue/max-attributes-per-line": [
"error",
{
"singleline": 1,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}
],
"newline-per-chained-call": 0,
"no-console": "off",
"comma-dangle": [
"error",
"never"
],
"no-empty": 2,
"no-unreachable": 2,
"eqeqeq": [
"error",
"smart"
],
"no-multi-str": 2,
"no-redeclare": 2,
"no-trailing-spaces": 2,
"no-extra-parens": 2,
"no-var": 2
},
"parserOptions": {
"parser": "babel-eslint"
}
},
5. 跑起来
vscode终端:
npm run serve
em…果然还是报错了，不过不是程序错误，是格式化的提示，因为我们使用的是4个空格，但是vue构建项目默认是2个空格，所以手动改下格式化。control + c 强制退出，修改文件格式化，HelloWorld.vue文件的时候遇到错误：
这个是因为prettier对template的格式化和eslint的格式化冲突了，这里我们采用prettier的，所以就要屏蔽eslint的，在template头尾加上：
<template>
<!-- eslint-disable -->
....中间的业务代码...
<!-- eslint-enable -->
</template>
这样vue文件就不会报错了。或者你可以这样，App.vue更加细节的指定：
<template>
<div id="app">
<!-- eslint-disable-next-line vue/max-attributes-per-line -->
<img alt="Vue logo"
src="./assets/logo.png">
<!-- eslint-enable -->
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template>
具体规则参考 eslint中文官网
6. 再次跑起
会自动打开浏览器，进入首页
ok，基础项目搭建完毕，下一篇开始撸业务代码了