首先假如你已經安裝了node和npm,如果沒有的話自己百度安裝一下。

如果感覺npm下載速度慢，可以使用淘寶映象cnpm,連結地址：

http://npm.taobao.org/

安裝cnpm

方式一：

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

方式二：

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"
 

1、安裝腳手架工具vue-cli

開啟cmd或者 git bash,輸入以下命令全域性安裝vue-cli

cnpm install --global vue-cli

2、建立初始化vue專案

cd命令進入自己要建立專案的目錄或者直接在那個目錄shift+滑鼠右鍵->在此處開啟命令列視窗或者git bash here,然後輸入初始化專案命令：

vue init webpack yv-pai

然後會出現一些選項讓你選擇，如圖：

Project name 專案名開始我們可以直接回車，下面進行選擇：

• Install vue-router 安裝vue-router路由外掛-->選擇y
• Use ESLint to lint your code? 使用ESLint進行程式碼檢查-->選擇n
• Set up unit tests 設定單元測試 -->選擇n
• Set up e2e tests with Nightwatch? 使用Nightwatch設定端對端測試-->選擇n
• Should we run 'npm install' for you after the project has been created? 你的專案建立之後進行安裝嗎？-->回車

安裝完成之後，通過cd命令進入到專案目錄

 cd yv-pai/

專案的目錄結果如下：

然後執行專案

npm run dev

啟動完成之後會顯示訪問地址，我這裡是

http://localhost:8081

訪問之後出現如下歡迎介面表示啟動成功！

3、vue專案程式設計軟體

我這裡使用的是sublime軟體進行vue專案的開發，大家也可以選擇自己喜歡的IDE進行開發。

開啟專案後目錄結構介紹如下：

4、vue初始化專案流程介紹

1.首先是index.html入口頁面

這裡的div標籤的id是app

2.然後在頁面入口js檔案main.js中例項化vue，掛載到id為app的div上，並引入元件App,使用模板App,這樣App元件就被掛載到了id為app的div上了，即掛載到了index.html中

3.開啟初始化的vue元件App.vue，它裡面包含了template模板、script指令碼和style樣式，每個元件都基本由這三個部分組成，在template模板中引入了vue的logo圖示，下面的 <router-view/>就是由路由產生的內容會顯示在這裡

4.開啟router/index.js路由js檔案，首先引入相關依賴和元件

import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入路由vue-router
import HelloWorld from '@/components/HelloWorld' //引入HelloWorld元件

通過Vue.use(Router)來使用路由

在規則routes裡面定義了訪問"/"路徑時會跳轉到HelloWorld元件，因此會將HelloWorld元件的內容顯示在<router-view/>內

5.開啟components/HelloWorld.vue元件，會發現這裡就是我們訪問的網頁顯示的內容

關於vue的其他功能以後章節將會逐一介紹。

關注我的微信公眾號獲取更多資源