繼上一篇vue環境的搭建（在D盤新建文件夾vue_cli，把（我已經上傳到了文件下）資料下tpls解壓完后的所有文件都復制到D盤vue_cli下）
目錄如圖：
1、webstorm設置
為了提高webStrom在Vue項目中響應速度，設置：
選中項目，點擊右鍵，mark directory as,excluded
進入到CLI：
windows+R
cmd
d:
cd vue_cli
npm run dev
2、介紹單文件組件概念
文件擴展名為 .vue 的 single-file components(單文件組件) ；
有3個標記：template(是html) script（組件的設置） style（樣式的設置）
3、vue項目啟動流程
在執行npm run dev的時候，會去在當前文件夾下的項目中找package.json文件,啟動開發服務器，默認端口是8080；
找到src的main.js文件，在該文件中new Vue的實例，要加載的模板內容App，App是src目錄下的App.vue結尾的文件，在App.vue所對應的模板當中，有一個router-view
在src目錄下有一個router文件夾，該文件夾有個index.js文件，該文件是配置路由詞典，指定了路由地址是空，加載Hello組件
4、使用Vue的組件
步驟1：創建.vue結尾的文件
MyHeader.vue
步驟2：創建組件
在main.js文件中，
①引入要使用的組件
import MyHeader from '@/components/MyHeader'
②創建組件
Vue.component('my-header',MyHeader)
步驟3：使用組件
MyList.vue
<template>
<my-header> </my-header>
</template>
5、Vue項目 如何 部署在真正的服務器端
在工程所在的目錄中，執行npm run build，
會生成一個dist的文件夾
就是我們可以直接部署（deploy）在服務器端的文件。
例如：hello.vue文件中：
從vue引入Vue
import Vue from 'vue'
從js文件vue-router引入Router
import Router from 'vue-router'
從路徑components/Hello蝦引入Hello（@是路徑……）
import Hello from '@/components/Hello'
Vue.vue Router.vue……都省去了.vue
Router是路由模塊，即可以使用路由模塊
Vue.use(Router)
導出配置路由
export default newRouter
注意：一般在assets下方css，js，img，fonts等需要的文件……