vue-cli3 創建項目 與初始配置

一 創建項目相關

1 安裝node.js(官網）

2 npm install -g @vue/cli

檢查是否安裝成功   vue -V

3 vue create pro-name

4選擇配置（按 空格 選中）

1. 1. Manually select features （自定義配置）
   2.  Babel (必選)
   3. TypeScript（項目中使用ts開發的話，就勾選）
   4. Progressive Web App (PWA) Support (接口緩存，優化項目)
   5. Router
   6. Vuex
   7. CSS Pre-processors (css預處理器，需要)
   8. Linter / Formatter (代碼格式，一般默認選中)
   9. Unit Testing (代碼測試)
   10. E2E Testing（需求界面測試）

5  history router，其實直白來說就是是否路徑帶 # 號，建議選擇 N

6  css 的預處理器我選擇的是 Sass/SCSS(with dart-sass) 。node-sass是自動編譯實時的，dart-sass需要保存后才會生效

7選擇 ESLint 代碼校驗規則，提供一個插件化的javascript代碼檢測工具，ESLint + Prettier 使用較多

8 選擇什么時候進行代碼校驗，Lint on save 保存就檢查

       9In dedicated config files 存放到獨立文件中，In package.json 存放到 package.json 中，本着項目結構簡單的想法，我選擇了第二個

      10 是否保存本次的配置了，N 不記錄，如果選擇 Y 需要輸入保存名字

      11   npm run serve (運行）

      12 npm run build（打包）

二  配置文件相關

 1 文件路徑別名

• 項目文件 新建 vue.config.js
• 內容參考 

module.exports = {
configureWebpack: {
resolve: {
alias: {
// @代表src
'assets': '@/assets',
'common': '@/common',
'components': '@/components',
'network': '@/network',
'views': '@/views',
}
}
}

router不需要配置別名  因為 各個文件都可以根據this.$router 拿到router

  2 引用css文件

　　1 在base.css中引入normalize.css

        2 在app.vue中引用base.css

<style scoped>

  @import '~@/assets/css/base.css';

</style>

  3  統一各個瀏覽器顯示的css文件

     https://necolas.github.io/normalize.css/latest/normalize.css  右鍵保存  引入即可

4 vue-cli中關閉代碼檢測

    1  vue.config.js

     2  lintOnSave: false

    3 重新編譯即可

5 文件編碼風格

  .editorconfig(很重要 ，統一風格）

三  項目目錄結構划分