npm & vue cli 新手筆記

安裝套件

npm install [-g|--save|--save-dev] {package_name} 
-g 全域
--save 專案本身 (含prod &dev)
--save-dev 專案本身 (dev only)
npm install -g @vue/cli ( vue-cli 3)
npm install -g vue-cli (vue-cli 2)  

下載modules (需下這個指令才會把package download下來)

npm install

 使用vue-cli2建立專案

vue init {template_name} {project_name} 
template name: webpack, webpack-simple, browserify, browserify-simple, simple

 使用vue-cli3建立專案

vue create {project_name}

 使用vue-cli3 UI建立專案

vue ui

 在vue-cli3底下使用vue init方式建立專案

vue install -g @vue/cli-init

// 以下都是使用CLI3執行

執行專案

npm run serve

附註: 安裝@vue/cli會順便安裝@vue/cli-service,裡面的binary vue-cli-service提供了serve, build, inspect 指令,這些binary指令可以直接透過npm script (可以在package.json看到) 來執行

npm run [serve|build|...]

或是透過npx直接執行npm裡面的binary

npx vue-cli-service [serve|build|...]

執行專案 (Instance Prototyping)
特別對單一支.vue做開發測試時使用。但這種方式他會去吃global的dependencies,所以在不同的開發環境可能會有不同的結果。使用前需先下載:

npm install -g @vue/cli-service-global

之後可以直接下

vue serve {entry_name}
vue serve App.vue

常用Packages

npm install --save vuex
npm install --save vue-router
npm install --save axio

Reference

  • https://cli.vuejs.org/guide/

Leave a Reply

avatar