1. 環(huán)境
- node[https://nodejs.org/dist/v8.9.1/node-v8.9.1-x64.msi]
- vscode [https://vscode.cdn.azure.cn/stable/dcee2202709a4f223185514b9275aa4229841aa7/VSCodeSetup-x64-1.18.0.exe]
安裝上面的兩個軟件，查看node是否安裝成功的方式是執(zhí)行以下命令
node -v
npm -v
npm 是和node一起安裝的译隘，執(zhí)行結(jié)果如下：
node安裝結(jié)果
vscode安裝成功的話粗恢，桌面會有圖標vs code
2. npm 鏡像
由于npm的倉儲是在國外，有時候網(wǎng)速會慢導致安裝npm包失敗，故在國內(nèi)使用cnpm阿里鏡像囚衔，執(zhí)行以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
等待安裝過程挖腰，結(jié)果如下
3. vue 安裝
- vue官方網(wǎng)站[https://cn.vuejs.org/]
- vue文檔地址[https://cn.vuejs.org/v2/guide/]
- 本篇文章的學習地址：vue安裝[https://cn.vuejs.org/v2/guide/installation.html]
執(zhí)行命令cnpm install -g vue安裝vue，執(zhí)行命令cnpm install --global vue-cli安裝vue-cli工具练湿，結(jié)果如下安裝vue
4. 創(chuàng)建vue項目
現(xiàn)在vue已經(jīng)安裝成功猴仑，我們假設在E:\vuedemo 文件下創(chuàng)建項目，在命令行通過命令cd e:\vuedemo切換工作目錄肥哎，按照官方文檔執(zhí)行以下命令
vue init webpack my-project
執(zhí)行結(jié)果如下:
- Project name ：項目名稱
- Proejct description:項目說明
- Author: 作者
- Vue build: 默認 standalone
- Install vue-router：是否安裝vue-router辽俗，輸入Y，回車
- Use ESLint to lint your code： 是否安裝ESLint規(guī)范代碼篡诽，輸入Y回車
- Pick an ESLint perset:默認 Standard
- Setup unit tests with Karma + Mocha :是否安裝 Karma和 Mocha 崖飘，這兩個插件是用來做單元測試的，默認安裝霞捡，輸入Y回車
- Setup e2e test with Nightwatch：安裝e2e工具一遍進行端到端測試坐漏，默認安裝，輸入Y回車
5. 運行vue項目
按照以上步驟碧信，已經(jīng)成功創(chuàng)建vue項目赊琳，現(xiàn)在運行創(chuàng)建的vue項目，命令如下
cd my-project
cnpm install
cnpm run dev
運行結(jié)果如下
此時默認瀏覽器會打開網(wǎng)址：http://localhost:8080/#/
到此砰碴，表示我們的項目已經(jīng)成功安裝并運行
6. 項目結(jié)構(gòu)
打開 vs code 躏筏，執(zhí)行菜單文件->打開，選擇路徑E:\vuedemo\my-project呈枉，打開文件夾后趁尼，查看vue項目結(jié)構(gòu)如下
src是所有的源代碼，index.html是啟動頁面猖辫，build是編譯需要的腳本代碼酥泞，config是項目配置代碼
7. src 文件代碼
src文件夾代碼如下
- assets，資源文件夾
- components,組件文件夾(頁面文件夾)
- router，路由文件夾
- App.Vue圣絮，程序的主代碼
- main.js敢伸，程序的入口代碼
main.js代碼如下
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
看第4行和第14行，表示導入了App這個vue組件悯姊，并定義一個vue實例
App.Vue 代碼
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
App.Vue是整個程序的框架基礎(chǔ)，Vue為后綴的格式說明以后學習在介紹贩毕，現(xiàn)在主要介紹代碼悯许，
template標簽主要是html代碼，是這個組件的顯示部分
script 標簽是整個頁面代碼的邏輯部分辉阶，默認使用 export defaul
style標簽里是整個頁面的css代碼
8.Hello Word組件如何加載的
看main.js 的第5行和第 12行先壕，表示在mian中導入了router路由瘩扼，router.js的代碼如下
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: HelloWorld
}
]
})
查看第3行和第7行，先導入HelloWord組件启上，在定義默認路由/信息邢隧，使用的組件是 HelloWorld,HelloWord的代碼展示部分是
HelloWorld.Vue組件在模塊App.Vue里是如何展示的呢？在App.Vue的模板標簽下冈在，有個標簽叫：
<router-view/>倒慧，這里是所有路由組件加載后呈現(xiàn)的地方。
總結(jié)
- 學習vue的環(huán)境要求
- 學習如何安裝vue
- 學習如何創(chuàng)建vue項目
- 學習如何運行vue項目
- 學習vue默認項目結(jié)構(gòu)目錄
- 學習vue的啟動過程
