一、那么我們就從最簡單的環(huán)境搭建開始:
安裝node.js,從node.js官網(wǎng)下載并安裝node,安裝過程很簡單,一路“下一步”就可以了(傻瓜式安裝)。安裝完成之后,打開命令行工具(win+r,然后輸入cmd),輸入 node -v,如下圖,如果出現(xiàn)相應的版本號,則說明安裝成功。
這里需要說明下,因為在官網(wǎng)下載安裝node.js后,就已經(jīng)自帶npm(包管理工具)了,另需要注意的是npm的版本最好是3.x.x以上,以免對后續(xù)產(chǎn)生影響。
安裝淘寶鏡像,打開命令行工具,把這個(npm install -g cnpm --registry=https://registry.npm.taobao.org)復制(這里要手動復制就是用鼠標右鍵那個,具體為啥不多解釋),安裝這里是因為我們用的npm的服務器是外國,有的時候我們安裝“依賴”的時候很很慢很慢超級慢,所以就用這個cnpm來安裝我們說需要的“依賴”。安裝完成之后輸入 cnpm -v,如下圖,如果出現(xiàn)相應的版本號,則說明安裝成功。
方法一:
使用阿里定制的cnpm命令行工具代替默認的npm,輸入以下代碼
npm install -g cnpm --registry=http://registry.npmmirror.com
檢查是否安裝成功:
$ cnpm -v
安裝成功之后,以后安裝依賴包的方式和npm的是一樣的,只是npm的命令換成是cnpm就可以了。
==================
安裝webpack,打開命令行工具輸入:npm install webpack -g,安裝完成之后輸入 webpack -v,如下圖,如果出現(xiàn)相應的版本號,則說明安裝成功。
安裝vue-cli腳手架構(gòu)建工具,打開命令行工具輸入:npm install vue-cli -g,安裝完成之后輸入? vue -V(注意這里是大寫的“V”),如下圖,如果出現(xiàn)相應的版本號,則說明安裝成功。
二、通過以上四步,我們需要準備的環(huán)境和工具都準備好了,接下來就開始使用vue-cli來構(gòu)建項目
在硬盤上找一個文件夾放工程用的。這里有兩種方式指定到相關(guān)目錄:①cd 目錄路徑? ②如果以安裝git的,在相關(guān)目錄右鍵選擇Git Bash Here
安裝vue腳手架輸入:vue init webpack exprice ,注意這里的“exprice” 是項目的名稱可以說是隨便的起名,但是需要主要的是“不能用中文”。
$ vue init webpack exprice? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ---------------------? 這個是那個安裝vue腳手架的命令
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(但頁面應用需要的模塊)
? 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:? --------------------- 這里說明如何啟動這個服務
cd exprice
npm install
npm run dev
如下圖:
cd 命令進入創(chuàng)建的工程目錄,首先cd exprice(這里是自己建工程的名字);
安裝項目依賴:npm install,因為自動構(gòu)建過程中已存在package.json文件,所以這里直接安裝依賴就行。不要從國內(nèi)鏡像cnpm安裝(會導致后面缺了很多依賴庫),但是但是如果真的安裝“個把”小時也沒成功那就用:cnpm install 吧
安裝 vue 路由模塊 vue-router 和網(wǎng)絡請求模塊 vue-resource,輸入:cnpm install vue-router vue-resource --save。
創(chuàng)建完成的“exprice”目錄如下:
下面我簡單的說明下各個目錄都是干嘛的:
啟動項目,輸入:npm run dev。服務啟動成功后瀏覽器會默認打開一個“歡迎頁面”,如下圖:
注意:這里是默認服務啟動的是本地的8080端口,所以請確保你的8080端口不被別的程序所占用。
至此簡單的一個項目構(gòu)建完畢....后面我將繼續(xù)利用這個構(gòu)建的項目寫一個簡單的單頁面應用。