创建一个vue项目

1、安装vue cli3

npm install -g @vue/cli

2、创建项目

vue create demo（demo 项目名）

3、配置项目

default 为默认配置

manually select features 为手动配置

② 是否使用history路由

③ 选择css处理器：sass/scss

④ 何时检测

⑤ 选择lint的配置文件如何存放（第一个是独立文件夹位置，第二个是在package.json文件里）

⑥ 是否保存本次创建项目的配置项，用于下次快速创建项目

完成项目创建

配置项目

在src文件下新建api文件用来管理接口
在src文件下新建common文件用来存放公共资源（公共样式、工具函数等）

新建vue.config.js （和src同级）
配置代理
module.exports = {
	configureWebpack： {
		devServer: {
	      host: '0.0.0.0',
	      port: 8080,
	      https: false,
	      open: true,
	      hotOnly: true,
	      proxy: {
	        '/api': {
	          target: 'http://xxxxxxx', // 测试地址
	          changeOrigin: true,
	          pathRewrite: {
	            '^/api': ''
	          }
	        }
	      } // 设置代理
	    }
	}
}

为文件路径设置别名
module.exports = {
	configureWebpack： {
		resolve: {
	      alias: {
	        assets: '@/assets',
	        components: '@/components',
	        common: '@/common',
	        views: '@/views',
	        api: '@/api'
	      }
	    }
	}
}
           

关于eslint

在.eslintrc.js 文件中配置规则
新建.prettierrc.js文件
	module.exports = {
	  eslintIntegration: true, // 让prettier使用eslint的代码格式进行校验
	  semi: false, // 去掉代码结尾的分号
	  singleQuote: true // 使用带引号替代双引号
	}


新建scriptw文件夹（用来做git commit提交规范的校验）
	在里面新建verify-commit.js文件
		const msgPath = process.env.HUSKY_GIT_PARAMS
		const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()
		
		const commitRE = /^(feat|fix|docs|style|css|refactor|perf|test|workflow|build|ci|chore|release|workflow)(\(.+\))?:.{1,50}/
		
		if (!commitRE.test(msg)) {
		    console.log()
		    console.error(`
		        不合法的 commit 消息格式。
		        请查看 git commit 提交规范：https://github.com/woai3c/Front-end-articles/blob/master/git%20commit%20style.md
		    `)
		
		    process.exit(1)
		}

安装husky，git commit 提交前做校验
npm i husky -D

在page.json中
"husky": {
    "hooks": {
      "pre-commit": "npm run lint",
      "commit-msg": "node script/verify-commit.js"
    }
}