使用vue 3.0 初始化vue腳手架

vue-cli3.0安裝

如果你事先已經全局安裝了舊版本的vue-cli(1.x 或 2.x),你需要先卸載它:

npm uninstall vue-cli -g
安裝

npm install -g @vue/cli // 安裝cli3.x
vue --version // 查詢版本是否為3.x
如果不想用cli3.x，cli3也能使用2.x模板，命令如下：

npm install -g @vue/cli-init // 安裝這個模塊
// 就可以使用2.x的模板：vue init webpack my-project

 

 

node環境

3.x需要在Node.js8.9或更高版本(推薦8.11.0+),在使用前請檢查下node的版本，命令如下:

node -v
如果你的版本不夠，可以使用下面的命令行來把Node版本更新到最新的穩定版：

npm install -g n // 安裝模塊 這個模塊是專門用來管理node.js版本，或者使用yarn安裝：yarn global add @vue/cli
n stable // 更新你的node版本
mac下如果提示你權限不夠，執行：

sudo n stable
安裝之后，記得查看版本號：查看版本（是否安裝成功）：vue -V (大寫的V)

 

 

 

創建項目

 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文件，文件中應該導出一個對象，然后進行配置，詳情查閱官方文檔

// vue.config.js
module.exports = {
  // 選項...
}

目錄說明：

 

使用圖形化界面

你也可以通過 vue ui 命令以圖形化界面創建和管理項目：

vue ui

 

上述命令會打開一個瀏覽器窗口，並以圖形化界面將你引導至項目創建的流程。 

啟動項目

初始完之后，進入到項目根目錄： cd my-project  

命令

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

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

 

打包上線

1. vue-cli 也提供了打包的命令，在項目根目錄下執行： npm run build

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

 

vue.config.js 配置說明  

這里簡單羅列vue,config.js一些配置項 當然你配置接口地址時還是通過下邊這個來獲取 在main.js里或者單獨配置接口地址的文件里：

var env = process.env.NODE_ENV
console.log(env)
vue.config.js文件：

// vue.config.js 配置說明
// 這里只列一部分，具體配置慘考文檔啊
module.exports = {
    // baseUrl  type:{string} default:'/' 
    // 將部署應用程序的基本URL
    // 將部署應用程序的基本URL。
    // 默認情況下，Vue CLI假設您的應用程序將部署在域的根目錄下。
    // https://www.my-app.com/。如果應用程序部署在子路徑上，則需要使用此選項指定子路徑。例如，
　　　　//如果您的應用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.

    baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',

    // outputDir: 在npm run build時 生成文件的目錄 type:string, default:'dist'

    // outputDir: 'dist',

    // pages:{ type:Object,Default:undfind } 
/*
  構建多頁面模式的應用程序.每個“頁面”都應該有一個相應的JavaScript條目文件。該值應該是一
  個對象，其中鍵是條目的名稱，而該值要么是指定其條目、模板和文件名的對象，要么是指定其條目
  的字符串，
  注意：請保證pages里配置的路徑和文件名 在你的文檔目錄都存在 否則啟動服務會報錯的
*/
    // pages: {
        // index: {
            // entry for the page
            // entry: 'src/index/main.js',
            // the source template
            // template: 'public/index.html',
            // output as dist/index.html
            // filename: 'index.html'
        // },
        // when using the entry-only string format,
        // template is inferred to be `public/subpage.html`
        // and falls back to `public/index.html` if not found.
        // Output filename is inferred to be `subpage.html`.
        // subpage: 'src/subpage/main.js'
    // },

    //   lintOnSave：{ type:Boolean default:true } 問你是否使用eslint
    lintOnSave: true,
    // productionSourceMap：{ type:Bollean,default:true } 生產源映射
    // 如果您不需要生產時的源映射，那么將此設置為false可以加速生產構建
    productionSourceMap: false,
    // devServer:{type:Object} 3個屬性host,port,https
    // 它支持webPack-dev-server的所有選項

    devServer: {
        port: 8085, // 端口號
        host: 'localhost',
        https: false, // https:{type:Boolean}
        open: true, //配置自動啟動瀏覽器
        // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理
        proxy: {
            '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true
            },
            '/foo': {
                target: '<other_url>'
            }
        },  // 配置多個代理
    }
}