開始使用vue-cli來構(gòu)建項目

在硬盤上找一個文件夾放工程用的。這里有兩種方式指定到相關(guān)目錄：①cd 目錄路徑? ②如果以安裝git的，在相關(guān)目錄右鍵選擇Git Bash Here

安裝vue腳手架輸入：vue init webpack exprice ，注意這里的“exprice” 是項目的名稱可以說是隨便的起名，但是需要主要的是“不能用中文”。

$ vue init webpack exprice? ? ? ? ? ? ? ---------------------? 這個是那個安裝vue腳手架的命令

例：vue init webpack vue-music? ? ? ? ? ? ? ---------------------在C盤創(chuàng)建了vue-music的項目

This will install Vue 2.x version of the template.? ?? --------------這里說明將要創(chuàng)建一個vue 2.x版本的項目

For Vue 1.x use: vue init webpack#1.0 exprice

? Project name (exprice)? ? ---------------------項目名稱

? Project name exprice

? Project description (A Vue.js project)? ---------------------項目描述

? Project description A Vue.js project

? Author Datura?? --------------------- 項目創(chuàng)建者

? Author Datura

? Vue build (Use arrow keys)

? Vue build standalone

? Install vue-router? (Y/n)? --------------------- 是否安裝Vue路由，也就是以后是spa（但頁面應(yīng)用需要的模塊）

? Install vue-router? Yes

? Use ESLint to lint your code? (Y/n) n ---------------------是否啟用eslint檢測規(guī)則，這里個人建議選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 "exprice".

To get started:? --------------------- 這里說明如何啟動這個服務(wù)

cd exprice ----項目所在目錄

npm install

npm run dev

如下圖：

cd 命令進入創(chuàng)建的工程目錄，首先cd exprice（這里是自己建工程的名字）；

安裝項目依賴：npm install，因為自動構(gòu)建過程中已存在package.json文件，所以這里直接安裝依賴就行。不要從國內(nèi)鏡像cnpm安裝(會導(dǎo)致后面缺了很多依賴庫)，但是但是如果真的安裝“個把”小時也沒成功那就用：cnpm install 吧

安裝 vue 路由模塊 vue-router 和網(wǎng)絡(luò)請求模塊 vue-resource，輸入：cnpm install vue-router vue-resource --save。

創(chuàng)建完成的“exprice”目錄如下：

簡單的說明下各個目錄:

啟動項目，輸入：npm run dev。服務(wù)啟動成功后瀏覽器會默認打開(注意默認端口號不要占用)，如圖：

作者：osmond

鏈接：http://www.itdecent.cn/u/2df17c22c0f5

來源：簡書

簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處。