vue-cli 3.0 初體驗

最近複習了下vue，忽然發現vue-cli已經更新到3.0版本了，而且變化蠻大，看來要不停的學習，真是一入前端深似海。

安裝步驟：

一、全局安裝 npm install -g @vue/cli

 Vue CLI 的包名稱由 vue-cli 改爲了 @vue/cli。 若是你已經全局安裝了舊版本的 vue-cli(1.x 或 2.x)，你須要先經過 npm uninstall vue-cli -g  卸載它。

二、經過vue --version查看版本信息，來肯定是否安裝成功

E:\vue\Vueexample3.0\new-hello>vue --version
3.0.0

三、建立一個項目 ，cd到要建立項目的文件夾，輸入下面命令   

vue create new-hello

安裝的過程當中會提示設置選項

 

按Enter鍵選擇preset或者default選項，若是手動選擇，按鍵盤的向上的箭頭，而後選擇下面的信息

用上下箭頭移到選項行，經過空格鍵控制選中或者取消，所有選擇好後按Enter後，會提示保存爲一個未來可複用的 preset，並輸入保存的preset的名稱（被保存的 preset 將會存在用戶的 home 目錄下一個名爲 .vuerc 的 JSON 文件裏），等項目建立完成後，會顯示下面的界面，若是咱們安裝完vue-cli 3.0 後再裝插件 能夠用命令 

vue add router
vue add vuex

四、切換到新建立的new-hello文件夾，執行npm run serve

而後把http://localhost:8080/ 複製到瀏覽器中打開，不知爲何不像以前的vue-cli會自動打開瀏覽器，ctrl+C是強制關閉服務

 

建立項目也能夠經過使用圖形化界面

vue ui

輸入vue ui會報錯，須要安裝core-js，安裝命令爲npm install -g core-js，而後再執行vue ui 能夠顯示配置界面，但有一些功能按鈕沒有，估計是瀏覽器版本問題，升級了Firefox,能夠正常顯示

 

跨域的狀況下須要把請求的地址代理的本地，方法以下：

在根目錄下新建vue.config.js，把下面的代碼放進去保存

module.exports = {
    devServer: {
        // 設置主機地址
        //host: 'localhost',
        // 設置默認端口
        //port: 8080,
        // 設置代理
        proxy: {
            '/api': {
                // 目標 API 地址
                target: 'http://127.0.0.1:80',
                // 若是要代理 websockets
                ws: true,
                // 將主機標頭的原點更改成目標URL
                changeOrigin: true
                pathRewrite:{
                	'^/api':'/'
                }
            }
        }
    }
}

公衆號：前端之攻略