建議收藏：使用vue 3.0 初始化vue腳手架

阿新 • • 發佈：2022-03-05

vue-cli3.0安裝

 1 如果你事先已經全域性安裝了舊版本的vue-cli(1.x 或 2.x),你需要先解除安裝它:
 2 
 3 npm uninstall vue-cli -g
 4 安裝
 5 
 6 npm install -g @vue/cli // 安裝cli3.x
 7 vue --version // 查詢版本是否為3.x
 8 如果不想用cli3.x，cli3也能使用2.x模板，命令如下：
 9 
10 npm install -g @vue/cli-init // 安裝這個模組
11 // 就可以使用2.x的模板：vue init webpack my-project

node環境

 1 3.x需要在Node.js8.9或更高版本(推薦8.11.0+),在使用前請檢查下node的版本，命令如下:
 2 
 3 node -v
 4 如果你的版本不夠，可以使用下面的命令列來把Node版本更新到最新的穩定版：
 5 
 6 npm install -g n // 安裝模組 這個模組是專門用來管理node.js版本，或者使用yarn安裝：yarn global add @vue/cli
 7 n stable // 更新你的node版本
 8 mac下如果提示你許可權不夠，執行：
 9 
10 sudo n stable
11 安裝之後，記得檢視版本號：檢視版本（是否安裝成功）：vue -V (大寫的V)

建立專案

1、命令：

1 vue create hello-word

hello-word是資料夾名字，如果不存在會自動建立資料夾，如果存在會安裝到那個資料夾中。

與 2.0 不同的是這裡不再是選擇模板，而是預設 presets。

注：按鍵盤上下鍵選擇預設（default）還是手動（Manually）， //如果選擇default，一路回車執行下去就行了（注：現在vue-cli3.0預設使用yarn下載），這裡我選擇手動。

這裡預設的設定非常適合快速建立一個新專案的原型，而手動設定則提供了更多的選項，它們是面向生產的專案更加需要的。

自定義配置：

選擇 [自定義] ，通過方向鍵上下移動，空格選中，Enter確定，自定義配置中，您將會看到這些配置項：

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) 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鍵是全選）

vue-cli3.0安裝完成後，會發現比基本目錄結構相對 2.0 精簡了不少。webpack配置的目錄不見了，也就是沒有build、config這兩個檔案夾了，想要配置的話，需要在專案根目錄下建立vue.config.js檔案。

這種方式的優勢對小白來說非常友好，不會一上來就兩個資料夾，一堆檔案，看著腦袋都大了。
然後在引用抄別人的配置的時候，也非常方便，直接將檔案複製過來就好了。
static資料夾改為public了，router資料夾變成了單個檔案之類的。
在自定義一下webpack的配置，我們需要在根目錄新建一個vue.config.js檔案，檔案中應該匯出一個物件，然後進行配置，詳情查閱官方文件

1 // vue.config.js
2 module.exports = {
3   // 選項...
4 }

目錄說明：

使用圖形化介面

你也可以通過 vue ui 命令以圖形化介面建立和管理專案：

1 vue ui

上述命令會開啟一個瀏覽器視窗，並以圖形化介面將你引導至專案建立的流程。

啟動專案

初始完之後，進入到專案根目錄： cd my-project

命令

1 npm run serve // 不是之前的 npm run dev

在瀏覽器輸入http://localhost:8080就可以看到vue的歡迎介面

打包上線

vue-cli 也提供了打包的命令，在專案根目錄下執行： npm run build
執行完之後，可以看到在專案根目錄下多出了一個 dist 目錄，該目錄下就是打包好的所有靜態資源，直接部署到靜態資源伺服器就好了。

vue.config.js 配置說明

這裡簡單羅列vue,config.js一些配置項當然你配置介面地址時還是通過下邊這個來獲取在main.js裡或者單獨配置介面地址的檔案裡：

 1 var env = process.env.NODE_ENV
 2 console.log(env)
 3 vue.config.js檔案：
 4 
 5 // vue.config.js 配置說明
 6 // 這裡只列一部分，具體配置慘考文件啊
 7 module.exports = {
 8     // baseUrl  type:{string} default:'/' 
 9     // 將部署應用程式的基本URL
10     // 將部署應用程式的基本URL。
11     // 預設情況下，Vue CLI假設您的應用程式將部署在域的根目錄下。
12     // https://www.my-app.com/。如果應用程式部署在子路徑上，則需要使用此選項指定子路徑。例如，
　　　　//如果您的應用程式部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.
13 
14     baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
15 
16     // outputDir: 在npm run build時 生成檔案的目錄 type:string, default:'dist'
17 
18     // outputDir: 'dist',
19 
20     // pages:{ type:Object,Default:undfind } 
21 /*
22   構建多頁面模式的應用程式.每個“頁面”都應該有一個相應的JavaScript條目檔案。該值應該是一
23   個物件，其中鍵是條目的名稱，而該值要麼是指定其條目、模板和檔名的物件，要麼是指定其條目
24   的字串，
25   注意：請保證pages裡配置的路徑和檔名 在你的文件目錄都存在 否則啟動服務會報錯的
26 */
27     // pages: {
28         // index: {
29             // entry for the page
30             // entry: 'src/index/main.js',
31             // the source template
32             // template: 'public/index.html',
33             // output as dist/index.html
34             // filename: 'index.html'
35         // },
36         // when using the entry-only string format,
37         // template is inferred to be `public/subpage.html`
38         // and falls back to `public/index.html` if not found.
39         // Output filename is inferred to be `subpage.html`.
40         // subpage: 'src/subpage/main.js'
41     // },
42 
43     //   lintOnSave：{ type:Boolean default:true } 問你是否使用eslint
44     lintOnSave: true,
45     // productionSourceMap：{ type:Bollean,default:true } 生產源對映
46     // 如果您不需要生產時的源對映，那麼將此設定為false可以加速生產構建
47     productionSourceMap: false,
48     // devServer:{type:Object} 3個屬性host,port,https
49     // 它支援webPack-dev-server的所有選項
50 
51     devServer: {
52         port: 8085, // 埠號
53         host: 'localhost',
54         https: false, // https:{type:Boolean}
55         open: true, //配置自動啟動瀏覽器
56         // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理
57         proxy: {
58             '/api': {
59                 target: '<url>',
60                 ws: true,
61                 changeOrigin: true
62             },
63             '/foo': {
64                 target: '<other_url>'
65             }
66         },  // 配置多個代理
67     }
68 }