vue-cli2.0 與 vue-cli3.0 配置的區別

提示：要了解vue-cli2.0與vue-cli3.0區別，首先你要熟悉vue-cli2.0

從最明顯最簡單的開始

項目目錄結構

 

 

能夠明顯的看出來，vue-cli2.0與3.0在目錄結構方面，有明顯的不一樣（vue3.0我是安裝了css預處理器，因此看上去內容更豐富哈）

vue-cli3.0移除了配置文件目錄，config 和 build 文件夾

同時移除了 static 靜態文件夾，新增了 public 文件夾，細心的你，打開層級目錄還會發現， index.html 移動到 public 中

配置項

vue-cli2.0的域名配置，分爲開發環境和生產環境，因此配置域名時，須要在config中的dev.env.js和prod.env.js中分別配置

前面說過，到了3.0 config文件已經被移除，可是多了.env.production和env.development文件，除了文件位置，實際配置起來和2.0沒什麼不一樣

固然，沒了config文件，跨域須要配置域名時，從config/index.js 挪到了vue.config.js中，配置方法不變

 

 

在3.0中，vue.config.js中有關於mock的配置

要注意的是：mockjs是用來模擬產生一些虛擬的數據，方便前端在後端接口尚未開發出來時獨立開發

即便使用了真實的url，可是mockjs攔截了ajax請求，返回的是設定好的本地數據

若是你想正常從後端獲取數據，就要關掉mock的使用，我是直接刪掉的，固然你能夠選擇別的辦法

main.js中有一段關於mock.js的描述（注意上線前要去掉你的mock）

 

 

可視化界面

找到項目，vue ui 命令會直接打開可視化界面，裏面能夠進行配置、依賴等操做

對於不喜歡命令行的皮友能夠說是很是友好了

 

 

 

 其餘

　全局安裝vu-cli 3.0 

npm install -g @vue/cli 

　　若是以前安裝了2.0版本，先卸載 npm uninstall -g vue-cli )

　　 安裝完 3.0 後，有如下兩種建立項目的方式：

　　1： vue create < project-name> 

　　而後會出現默認和手動兩個選項，跟着步驟走就好（傻瓜式操做）

　　2:   用視圖建立項目  vue  ui （上面已經說了）

 

　在2.x0中，你使用 Vue.set 來給對象新增一個屬性時，這個對象的全部 watcher 都會從新運行

　而在3.0中，只有依賴那個屬性的 watcher 纔會從新運行 ，這樣使得變動通知更加精準

再有其餘的變化，可能就涉及到底層了，暫且不討論，畢竟實際項目進度優先，研究底層技術這個事，就留給諸位大牛吧

 

以前大部分地方vue-cli3.0和vue-cli2.0都寫的vue2.0 vue3.0 

好在被一樓的姐妹兒指出來了 

感謝 有機會請你吃火鍋