新手Vue腳手架搭建 Webpack
阿新 • • 發佈:2018-11-22
安裝node.js
首先需要下載 nodeJs 官網 next 安裝完成後
開啟命令列工具輸入命令node -v,如下圖,如果出現對應版本號,就說明安裝成功了
安裝cnpm
nodejs有自帶的 npm但是國外的下東西比較慢
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝成功後 cnpm -v 如下圖 安裝成功
vue安裝
$ cnpm install vue
安裝完成後
安裝vue-cli腳手架構建工具
ue-cli 提供一個官方命令列工具,可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置,帶來現代化的前端開發流程。只需幾分鐘即可建立並啟動一個帶熱過載、儲存時靜態檢查以及可用於生產環境的構建配置的專案:
$ cnpm install --global vue-cli
下一步 $ cnpm install vue-cli -g
安裝webpack
$ cnpm install webpack -g
安裝完成後我們就可開始建立專案了
建立專案
cd:到你要建立專案的目錄 輸入:
$ vue init webpack my-project ,注意這裡的“my-project” 是專案的名稱可以說是隨便的起名,但是需要主要的是“不能用中文” 需要一點時間 。
$ vue init webpack my- project --------------------- 這個是那個安裝vue腳手架的命令
This will install Vue 2.x version of the template. ---------------------這裡說明將要建立一個vue 2.x版本的專案
For Vue 1.x use: vue init webpack#1.0 my-
? Project name ( my- project ) ---------------------專案名稱
? Project name my- project
? Project description (A Vue.js project) ---------------------專案描述
? Project description A Vue.js project
? Author Datura --------------------- 專案建立者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由,也就是以後是spa(但頁面應用需要的模組)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否啟用eslint檢測規則,這裡個人建議選no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project ".
To get started: --------------------- 這裡說明如何啟動這個服務
如下圖:
然後 cd my-project
初始化專案 $ npm install
啟動服務 $ npm run dev
這個時候就會啟動一個8080埠
然後本地訪問: http://localhost:8080/ 如下圖
注意:這裡是預設服務啟動的是本地的8080埠,所以請確保你的8080埠不被別的程式所佔用。
下面我簡單的說明下各個目錄都是幹嘛的: