# 项目构建
我们使用Vue的脚手架vue-cli来直接创建项目，然后再根据项目进行具体的配置。
# 1、安装
vue-cli只需要全局安装一次就可以，最好升级到最新版本的，否则无法选择创建vue2.x还是3.0x版本的项目。
npm install -g @vue/cli
# OR
yarn global add @vue/cli
# 查看版本
vue --version
# 2、创建项目
在项目文件夹内打开，vue创建项目会自动生成一个文件。创建使用自定义选项，选择我们需要的几个选项。
vue create hello-world
选择预设
选择需要的选项
选择创建版本2.x
选择路由模式
选择CSS预处理器，使用Less
选择代码检查配置，统一使用ESLint + Standard config风格进行代码格式检查
选择什么时候行代码检查
配置文件存放位置
最后一个选项直接回车，然后等待项目创建完成，切换到项目目录，运行查看项目。
# 3、项目结构设计
项目创建好后，我们要配置项目结构中常见的模块目录，如assets用来保存静态资源文件，api用来保存接口文档，utils用来保存常用的js工具库。
├── public
│ └── logo.png # LOGO
| └── index.html # Vue 入口模板
├── src
│ ├── api # Api ajax 等
│ ├── assets # 本地静态资源
│ │ ├── images # 项目图片
│ │ ├── css # reset、common样式
│ │ ├── font # 字体库
│ │ ├── iconfont # iconfont库
│ │ └── less/sass # 公共less/sass文件
│ ├── components # 业务公共组件
│ ├── config # 基础配置
│ ├── directives # 自定义指令
│ ├── layouts # 基础布局
│ ├── mock # mock假数据
│ ├── router # Vue-Router
│ ├── store # Vuex
│ ├── utils # 工具库
│ ├── views # 业务页面入口和常用模板
│ ├── App.vue # Vue 模板入口
│ └── main.js # Vue 入口 JS
├── .eslintrc.js # eslint配置文件
├── .gitignore # git忽略
├── babel.config.js # babel配置
├── jsconfig.json
├── README.md
├── package.json # 包管理
└── vue.config.js # 配置文件
# 二、项目配置
# 1、vuex配置
在创建项目时可以默认选择vuex和router插件，创建好后会自动生成store文件和router文件和对应配置，如果没有选择可以手动进行添加。
2、router配置
3、css配置
4、vue.config.js配置
const path = require('path');
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
publicPath: '/', // 部署应用包时的基本URL，默认部署在跟地址/，如果部署到子路径下需要修改该配置，如 '/blog/'
transpileDependencies: true,
productionSourceMap: false,
// 本地服务启动配置、跨域配置
devServer: {
disableHostCheck: true
host: 'xxx.xxx.xxx.xx', // 本机地址
port: 8080, // 端口号
https: false, // https:{type:Boolean}
open: true, // 配置自动启动浏览器
proxy: {
'/api': {
target: 'https://xxxx.cn', // 跨域地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
// 全局配置less
css: {
loaderOptions: {
less: {
lessOptions: {
// DO NOT REMOVE THIS LINE
javascriptEnabled: true,
globalVars: {
// less vars，customize ant design theme
// 'primary-color': '#F5222D',
}
}
}
}
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [path.resolve(__dirname, './src/assets/less/main.less')]
}
}
})
# 5、环境变量配置
当在项目中要区分开发环境和生产环境时，都是通过process.env.NODE_ENV来进行判断，这个就是配置的环境变量，还有我们的接口地址，也可以通过环境变量进行区分。
我们可以在项目根目录中创建下列文件来指定环境变量
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入，mode是模式名字，随便取
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
环境变量会根据应用的模式来自动区分使用哪个环境变量。默认情况下，Vue项目有三个模式：
development 模式用于 vue-cli-service serve
test 模式用于 vue-cli-service test:unit
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
一般我们创建环境变量文件，只需创建一个.env和.env.development两个就可以进行区分开发和生产环境了。在创建环境变量时，最好用 NODE_ENV，BASE_URL 或者以 VUE_APP_ 开头命名的变量。
// .env 生产环境
NODE_ENV=production
VUE_APP_API_BASE_URL=http://saasops.yunsee.cn
VUE_APP_VERSION=1.0.0
// .env.development 开发环境
NODE_ENV=development
VUE_APP_API_BASE_URL=http://192.168.100.4:3351
VUE_APP_VERSION=1.0.0
使用： 直接使用process.env来调用环境变量就可以了
// vue中使用
export default {
data() {
return {
baseUrl: process.env.VUE_APP_API_BASE_URL
}
}
}
// js文件中使用
// 判断环境
if (process.env.NODE_ENV !== 'production') {
console.log(process.env.VUE_APP_VERSION)
} else {
console.log(222)
}
// index.html
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
# 6、axios请求配置
# 7、mock假数据
# 8、Event Bus使用
在src/utils文件下创建event-bus.js文件
// event-bus.js
import Vue from 'vue'
const EventBus = new Vue()
export default EventBus
在mian.js引入
// 中央事件Bus
import EventBus from '@/utils/event-bus'
Vue.prototype.$bus = EventBus
使用
// 提交
this.$bus.$emit('EMIT_EVENT', params)
// 接收
created() {
this.$bus.$on('EMIT_EVENT', (params) => {
console.log(params)
})
},
// 销毁
destroyed() {
this.$bus.$off('EMIT_EVENT')
}
# 9、编码规范配置
在创建项目时有一个选项选择代码检查配置选择ESlint + Standard config
Eslint配置
我们可以在.eslintrc.js对ESlint规则进行重新配置。
// .eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'@vue/standard'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'vue/multi-word-component-names': ['off'], // 是否强制组件名称多单词
'camelcase': 'off', // 是否强制使用驼峰拼写法命名规定
'space-before-function-paren': 'off', // 是否强制方法圆括号左边空格
'no-multiple-empty-lines': 'off', // 不允许多个空行
'new-cap': 'off', // 构造函数名首字母大写
'eol-last': 'off', // 要求或禁止文件末尾存在空行
'dot-notation': 'off', // 允许不使用点表示写法
'vue/no-mutating-props': ['off'], // 关闭Vue不能修改props警告
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
项目中有一些文件不需要eslint进行代码检查，可以配置忽略文件进行忽略。在根目录下创建.eslintignore文件
// .eslintignore
/node_modules/
/public/
/src/assets/
/src/mock/
.vscode
.idea
格式化文件
格式化配置把代码转成eslint所需的风格，在根目录创建.prettierrc文件来格式化代码。
// .prettierrc
{
"semi": false,
"printWidth": 180,
"singleQuote": true,
"quoteProps": "preserve",
"trailingComma": "none",
"arrowParens": "avoid"
}
# 10、自定义指令配置
← 实现一个全局挂载插件 Mock假数据 →