建立一個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"
    }
}