Vue 安裝

vue-cli /webpack 全局安裝

如果在意安裝速度，可以使用淘寶鏡像來安裝

安裝淘寶鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝完淘寶鏡像后，就可以使用cnpm 來代替 npm 安裝工具啦

我個人比較喜歡直接使用npm 安裝：

全局webpack：

npm install webpack -g

vue腳手架vue-cli：

npm install vue-cli -g

安裝webpack 版vue 項目

在指定的目錄中打開命令窗口（編輯器中自帶的命令窗口也可以）

vue init webpack myvuedemo

• Project name (回車默認(rèn))
• Project description (A Vue.js project) 回車默認(rèn) （也可以輸入自己的描述）
• Author 回車默認(rèn)（自己的名字）
• Vue build 默認(rèn)選擇 Runtime+Compiler
  

Install vue-router?Y 安裝

Use ESLint to lint your code? Y (推薦使用，保持良好的代碼編寫規(guī)范)

pick an eslint preset. 默認(rèn) Standard

set up unit tests ？ n (unit 測試，不需要)

setup e2e tests with Nightwatch？n (e2e 測試，不需要）

Should we run npm install for you after the project has been created? (recom
mended) npm （選用 npm ）

安裝完畢

目錄結(jié)構(gòu)

Vue運(yùn)行

運(yùn)行命令

cd myvuedemo
npm run dev

運(yùn)行成功

頁面內(nèi)容

Vue build 打包

打包命令

npm run build

打包后的目錄結(jié)構(gòu)

運(yùn)行打包項目

需要開啟服務(wù)運(yùn)行

使用http-server 運(yùn)行（如沒有安裝http-server的，使用node 全局安裝 http-server 即可，npm install http-server -g）

cd dist
http-server

運(yùn)行打包后的內(nèi)容

從搭建到運(yùn)行打包發(fā)布全部完成，是不是很簡單呢？

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論