Vue CLI 3 x的使用 2 安裝

vue cli v3.x官方教程：

關於與先前版本的說明

1. 包名由vue-cli變更為@vue/cli；

2. 若需要全域性安裝舊版本的vue-cli(1.x或2.x)，則需要先解除安裝已安裝的版本，解除安裝指令：npm uninstall vue-cli -g或yarn global remove vue-cli。

node版本要求

node v8.9或以上，推薦v8.11.0+。在同一臺機器上可以使用nvm或nvm-windows管理node的多個版本。

擴充套件：版本管理n與nvm

安裝

npm install -g @vue/cli 或yarn global add @vue/cli

安裝完成後，可以在終端使用vue命令。直接執行vue命令，會在終端顯示vue下可使用的指令：

檢視vue安裝版本

vue-v/ --version

vue service cli安裝

npm i -g @vue/cli-service-global 或yarn global add @vue/cli-service-global

安裝完成後，即可以使用vue serve或vue build命令將單獨的*.vue檔案構建成快速原型。vue serve的缺點在於需要全域性安裝依賴包，這些全域性安裝的依賴包可能在不同的機器上可能並不一致。因此，只建議構建快速原型。

vue serve 指定入口檔案

例項：

1. 建立目錄test

hello vue！

h1>

template>

執行以下命令：

vue serve

或

預設啟動服務的埠是8080，訪問http://localhost:8080/:

4. 編譯

vue build

或

編譯後會在同目錄下生成用於靜態部署的dist目錄:

dist ├── index.html └── js .map ├── chunk-vendors.6e7c8d23.js └── chunk-vendors.6e7c8d23.js .map

編譯成lib庫時，vue不會被包含在lib庫中，這意味著即使**中引入了vue，也不會被打包到lib中。如果作為bundler使用，會嘗試載入vue作為依賴；否則，將會返回到全域性的vue變數。

vue build-- target lib// 不指定目標輸出檔名和入口檔案或vue build-- target lib- -name 目標輸出檔名 //不指定入口檔案或vue build-- target lib- -name 目標輸出檔名入口檔案

編譯後會在同目錄下生成用於靜態部署的dist目錄:

dist .js // commonjs .js.map .js // umd .js.map .min .js.min .js.map └── demo.html

入口檔案：vue vs. js/ts.vue檔案始終預設匯出，所以使用*.vue作為入口函式時會直接暴露給vue元件本身；若是使用.js/.ts，因為包含命名匯出，因此將會作為模組暴露給呼叫者，也就意味著該庫在以umd構建時為window.yourlib.default，以commonjs構建時為const mylib = require('mylib')。如果沒有命名匯出並且希望直接暴露預設匯出，則可以使用在vue.config.js中修改webpack的配置，將其修改為：

module.exports = 
}}

相容性編譯成web元件時，vue不會被包含在元件中，這意味著即使**中引入了vue，也不會被打包到lib中。如果作為bundler使用，會假定vue時掛載在宿主頁面上的全域性變數。

vue build-- target wc// 不指定目標輸出檔名和入口檔案或vue build-- targetwc- -name 包含連字元的目標元件名 //不指定入口檔案或vue build-- targetwc- -name 包含連字元的目標元件名入口檔案

編譯後會在同目錄下生成用於靜態部署的dist目錄:

dist ├── demo.html .map .js.js .map

更多關於web元件內容

Vue CLI 3 x的使用 2 安裝

vue cli2 x與vue cli3 x的搭建

vue cli 3 x 搭建專案

vue cli 3 x 上線入坑合集

Vue CLI 3 x的使用 2 安裝

vue cli2 x與vue cli3 x的搭建

vue cli 3 x 搭建專案

vue cli 3 x 上線 入坑合集

相關推薦

vue cli 3 x 上線入坑合集