1.安裝npm
sudo apt-get install npm
測試安裝是否成功: npm -v 彈出安裝的版本號，即可證明安裝成功

我的已經安裝了。圖上：

sudo npm install -g npm
更新npm到最新版

2.安裝Vue CLI

1.Install:
　　sudo npm install -g @vue/cli
　　# OR
　　yarn global add @vue/cli

 

 

 

2.Create a project:
　　vue create my-project
　　# OR
　　vue ui

 我選擇把這個專案建立在workspace下

此處有兩個選擇：

• default (babel, eslint) 預設套餐，提供 babel 和 eslint 支援。
• Manually select features 自己去選擇需要的功能，提供更多的特性選擇。比如如果想要支援 TypeScript ，就應該選擇這一項。

可以使用上下方向鍵來切換選項。如果只需要 babel 和 eslint 支援，那麼選擇第一項，就完事了，靜靜等待 vue 初始化專案。

如果想要更多的支援，就選擇第二項：切換到第二項，按下 enter 鍵選中，彈出如下介面：

vue-cli 內建支援了8個功能特性，可以多選：使用方向鍵在特性選項之間切換，使用空格鍵選中當前特性，使用 a 鍵切換選擇所有，使用 i 鍵翻轉選項。

對於每一項的功能，此處做個簡單描述：

• TypeScript 支援使用 TypeScript 書寫原始碼。
• Progressive Web App (PWA) Support PWA 支援。
• Router 支援 vue-router 。
• Vuex 支援 vuex 。
• CSS Pre-processors 支援 CSS 前處理器。
• Linter / Formatter 支援程式碼風格檢查和格式化。
• Unit Testing 支援單元測試。
• E2E Testing 支援 E2E 測試。

那麼基於開發常見的專案，同時兼顧專案健壯性的原則，本次選擇如下特性支援：（注：空格鍵是選中與取消，A鍵是全選）

 

按下 enter 鍵確認選擇，進入下一步

這裡是讓選擇在開發 Vue 元件時，要不要使用 class 風格的寫法。為了更方便地使用 TypeScript ，此處選擇 Y ： 

 

按下 enter 鍵確認選擇，進入下一步

這個選項的意思是要不要使用 babel 工具自動為轉換後的 TypeScript 程式碼注入 polyfiills 

 

按下 enter 鍵確認選擇，進入下一步

這個選項的意思是要不要使用 歷史的路由，我選擇NO

這樣打包出來丟到伺服器上可以直接使用了，後期要用的話，也可以自己再開起來。

選yes的話需要伺服器那邊再進行設定

 

按下 enter 鍵確認選擇，進入下一步

 

這裡就是說我們在專案裡面需要支援何種動態樣式語言，此處提供了三個選項：

• SCSS/SASS
• LESS
• Stylus

此處選擇 LESS ，進入下一步：

這個選項的意思是選擇規範我們程式碼的選項：我選的是：ESLint + Standard config 

TSLint
   ESLint僅具有錯誤預防功能
   ESLint + Airbnb配置
❯ESLint+標準配置
   ESLint + Prettier

 

按下 enter 鍵確認選擇，進入下一步

Lint on save // 儲存就檢測

Lint and fix on commit // fix和commit時候檢查

我選擇儲存就檢測

 

按下 enter 鍵確認選擇，進入下一步

選擇單元測試工具，直接選擇現在比較火的 Jest ，進入下一步：

這一步就是要選擇配置檔案的位置了。對於 Babel 、 PostCSS 等，都可以有自己的配置檔案： .babelrc 、 .postcssrc 等等，同時也可以把配置資訊放在 package.json 裡面。 此處出於對編輯器（ Visual Studio Code ）的友好支援（編輯器一般預設會在專案根目錄下尋找配置檔案），選擇把配置檔案放在外面。 選擇 In dedicated config files ，進入下一步：

問你要不要不要把當前的這一系列選項配置儲存起來，方便下一次建立專案時複用。我選擇N不記錄，如果鍵入Y需要輸入儲存名字，有點麻煩。。。

 

11.確定後，等待下載依賴模組

 

 安裝完成後就是這樣：

 

 按照命令啟動：

 

 在瀏覽器中訪問地址打開了如下介面：

 

關於埠號的配置，打包之後路徑的配置，圖片的配置 等等.....需要在根目錄下建立vue.config.js

Js程式碼在下面：

 

 1 /**
 2  * @fileOverview app配置
 3  *官方vue.config.js 參考文件 https://cli.vuejs.org/zh/config/#css-loaderoptions
 4  * @author Franks.T.D
 5  * @date 2018/06/17
 6  */
 7 
 8 const path = require('path')
 9 const debug = process.env.NODE_ENV !== 'production'
10 const VueConf = require('./src/assets/js/libs/vue_config_class')
11 const vueConf = new VueConf(process.argv)
12 
13 console.log('')
14 console.log('本地啟動或構建的檔案資訊 | 開始--------------------------------------------------------------')
15 console.log(vueConf.pages)
16 console.log('本地啟動或構建的檔案資訊 | 結束--------------------------------------------------------------')
17 console.log('')
18 
19 module.exports = {
20   baseUrl: vueConf.baseUrl, // 根域上下文目錄
21   outputDir: 'dist', // 構建輸出目錄
22   assetsDir: 'assets', // 靜態資源目錄 (js, css, img, fonts)
23   pages: vueConf.pages,
24   lintOnSave: true, // 是否開啟eslint儲存檢測，有效值：ture | false | 'error'
25   runtimeCompiler: true, // 執行時版本是否需要編譯
26   transpileDependencies: [], // 預設babel-loader忽略mode_modules，這裡可增加例外的依賴包名
27   productionSourceMap: true, // 是否在構建生產包時生成 sourceMap 檔案，false將提高構建速度
28   configureWebpack: config => { // webpack配置，值位物件時會合並配置，為方法時會改寫配置
29     if (debug) { // 開發環境配置
30       config.devtool = 'cheap-module-eval-source-map'
31     } else { // 生產環境配置
32     }
33     Object.assign(config, { // 開發生產共同配置
34       resolve: {
35         alias: {
36           '@': path.resolve(__dirname, './src'),
37           '@c': path.resolve(__dirname, './src/components'),
38           'vue$': 'vue/dist/vue.esm.js'
39         }
40       }
41     })
42   },
43   chainWebpack: config => { // webpack連結API，用於生成和修改webapck配置，https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
44     if (debug) {
45       // 本地開發配置
46     } else {
47       // 生產開發配置
48     }
49   },
50   css: { // 配置高於chainWebpack中關於css loader的配置
51     modules: true, // 是否開啟支援‘foo.module.css’樣式
52     extract: true, // 是否使用css分離外掛 ExtractTextPlugin，採用獨立樣式檔案載入，不採用<style>方式內聯至html檔案中
53     sourceMap: false, // 是否在構建樣式地圖，false將提高構建速度
54     loaderOptions: { // css預設器配置項
55       css: {
56         localIdentName: '[name]-[hash]',
57         camelCase: 'only'
58       },
59       stylus: {}
60     }
61   },
62   parallel: require('os').cpus().length > 1, // 構建時開啟多程序處理babel編譯
63   pluginOptions: { // 第三方外掛配置
64   },
65   pwa: { // 單頁外掛相關配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
66   },
67   devServer: {
68     open: true,
69     host: '0.0.0.0',
70     port: 8080,
71     https: false,
72     hotOnly: false,
73     proxy: {
74       '/api': {
75         target: '<url>',
76         ws: true,
77         changOrigin: true
78       }
79     },
80     before: app => {}
81   }
82 }

View Code

 

 

 

打包上線

在開發完專案之後，就應該打包上線了。 vue-cli 也提供了打包的命令，在專案根目錄下執行：

npm run build

執行完之後，可以看到在專案根目錄下多出了一個 dist 目錄，該目錄下就是打包好的所有靜態資源，直接部署到靜態資源伺服器就好了。

實際上，在部署的時候要注意，假設靜態伺服器的域名是 http://static.baidu.com ，那麼對應到訪問 <專案根目錄>/dist/index.html 的 URL 一定要是 http://static.baidu.com/index.html ，其他的靜態資源以此類推。

單元測試

執行：

npm run test