上一篇我們簡單的看了看vue的基本用法，就是三步，首先就是用<script>標簽引入vue的依賴，然后就是寫html標簽，在標簽中用vue指令綁定一些屬性，最后就是new Vue(xxx)實例，在這個實例中有很多的實例屬性可以給html標簽中那些綁定的屬性賦值、或者是綁定事件函數；
這一篇我們來說說vue-cli這樣的一個腳手架，快速搭建一個vue項目，注意我們的這個腳手架可以直接用npm下載，換句話的意思就是必須要有node環境，這里配置node的環境就不多說了。。。
vue-cli版本是2.x，現在有3.x版本的，目錄和2.x版本的有一些區別，有興趣的可以去看看
1.搭建vue-cli項目
如果你的node安裝好了而且環境變量配置好了，那么輸入以下指令應該有類似這樣的輸出
然后我們運行npm install -g vue-cli，全局安裝一個vue-cli的模塊，因為我們要經常使用的，全局安裝只用下載一次就行了，以后就可以直接用，那么vue-cli具體的是下載到什么地方去了呢？默認安裝在C盤對應的用戶下的AppData目錄下，我的目錄是C:\Users\admin\AppData\Roaming\npm\node_modules，下圖所示，這個安裝路徑就用默認的就行，想要自己修改的話可以自己搜索方法
只要是npm install -g xxx 安裝的全局模塊都會在這里，我下載了幾個常用的
然后我們新建一個文件夾取名叫做 vue學習，用於存放我們自己將要寫的vue-cli項目，用cmd進入這個文件夾，執行vue init webpack vueprj01 ，最后的這個vueprj01是項目名，隨便定義，不要有特殊字符和大寫字母就行，然后除了一個地方其他地方全部回車就好，下圖所示
注意，新手的話，在下圖中的Use ESLint to lint your code 這里一定要選擇no，不然這里就是在你編譯項目的時候做語法檢查，賊不好用，即使是一個空格也會給你報錯的
一路回車之后，一個項目就成功了，然后就等着下載那些依賴模塊就行了，反正下載的文件很多，幾分鍾吧！完成之后我們用vscode打開這個vueprj01文件夾，技能看到下圖所示的東西：
然后我們只需要在npm script那里，其實就是npm腳本，點擊dev，整個項目就運行起來了；點擊這個dev就行了（其實就是相當於在cmd中進入vueprj01中，執行npm run dev命令）
其實點擊這里的dev和start是一樣的效果，都可以，習慣點dev了，然后根據控制台提示訪問http://localhost:8080，就可以看到效果了：
到此為止一個簡單的vue-cli項目就搭建出來了，很容易，下面我們就來簡單的使用一波
2.簡單的使用vue-cli構建項目
在使用之前，我們需要先了解一點基礎知識：
路由：也就是我們在創建項目的時候一直回車，有一個是install vue-router，這個就是路由，那么路由有什么用呢？舉個不是很恰當的例子，就是路由器，當有個人都在用一個路由器的wifi的時候，為什么每個人都能訪問不同的網站呢？這里就是有路由器的作用，可以分配不同的請求到不同的網站；在我們這里就是不同的url訪問vue項目，首先路由就會根據你的url去調用不同的頁面，然后渲染返回給你；
組件：在這里我們已經看不到我們上一篇的那種做法了，上一篇是在一個html中引入vue的依賴庫，然后使用vue指令，new一個Vue實例；但是在vue-cli中我們要學會組件化開發的思想，就是任意的一個文件就是一個組件，無論是一個vue文件，css文件還是js文件等，都是一個組件，我們在使用之前，必須要引入；
組件的基本格式：由於每一個文件都是一個組件，所以格式也不一樣，后面我們會慢慢說的，這里我們只說以.vue為后綴的組件，這文件分三個部分，這里面有一個<template></template>，這里就是寫html標簽的，注意，每一個template標簽最外層必須有且只有一個div標簽，然后你的各種html標簽都要放在這個div標簽中，如下所示；第二部分就是vue實例中的各種屬性和鈎子函數，導入第三方組件只能在第二部分導入；第三部分就是寫css樣式
<template> //注意，最外層只能有一個div標簽 <div> <h1>我是h1標簽</h1> <div>我是div標簽</div> <table></table> </div> </template> <script> //這里就跟new Vue(xxx)中的各種屬性一樣使用 export default { name:'', props:[''], data () { return { }; }, components: {}, computed: {}, beforeMount() {}, mounted() {}, methods: {}, watch: {} } </script> //這里就是寫css代碼，這里的scoped表示該樣式只在當頁面有效，避免污染其他頁面樣式 <style lang='' scoped>
</style>
引入組件的方式有兩種：
一種是類似這種，import Vue from 'vue'，import App from './App' ；（注意：引號里面的不用加后綴，引號里面的./表示的是當前文件所在的這一層目錄），可能有人會奇怪vue這里沒有加./也行嗎？因為vue這個模塊是系統模塊，也就是通過npm下載的模塊（注意，不是全局下載），默認是放在項目中node_modules中，要引用這里的模塊可以直接引入，不用加./；
第二種方式，由於vue-cli項目是需要node環境的，於是可以用node引入模塊的方式，例如const prodEnv = require('./prod.env')，其實和第一種方式一樣的，當然，推薦使用第一種
vue-cli項目只有一個html文件，我們只是將這個html中的div標簽內容和樣式進行替換，這也叫做單頁面開發
下面我們來簡單使用一下，第一步，在src目錄下新建一個Header.vue文件，
<template>
<div>
<h1>這是我的第一個vue項目</h1>
</div> </template> <script> export default {}; </script> <style lang='' scoped> </style>
第二步，在router目錄下的index.js中，添加如下：
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' //引入我們自己定義的Header組件，可以不用加后綴，@默認表示目錄src import Header from '@/components/Header' //這里表示Vue實例注冊路由，換句話說有了這行代碼我們的vue項目才能有路由分發的效果 Vue.use(Router) export default new Router({ routes: [{
//這里隨便修改一下，HelloWorld組件中隨便改改，就不展示出來了 path: '/hello', name: 'HelloWorld', component: HelloWorld }, { //這里配置一個路徑，當url訪問xxx/head的時候，就會訪問Header組件 path: '/head', name: 'Header', component: Header } ] })
第三步，修改APP.vue文件
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- 這里使用我們引入的組件，只要是引入的組件都可以用標簽的形式使用-->
<Header/>
<!-- 這里就是根據路由匹配到的組件內容，就是router-lingk標簽對應的內容，會在這里插入進來 -->
<router-view/>
</div>
</template>
<script>
//引入Header組件
import Header from '@/components/Header'
export default {
name: 'App',
//在當前組件注冊子組件Header，然后再上面的html中才能使用<Header/>
components:{
//這里相當於"Header":Header,當要取的組件名字和組件一樣，可以用這種簡寫形式
Header
}
}
</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>
最后你只需要點擊vscode中的dev按鈕，在瀏覽器輸入http://localhost:8080/head，就能看到效果了；
然后點擊那個鏈接"點擊我"，路由就會起作用，就會訪問Helloworld組件，並將它渲染到App.vue文件的那個<router-view/>標簽這里
簡單說說過程：
首先最外面是一個html，然后將APP.vue組件會通過某種方式編譯成css，js等渲染這個html；
而這個APP.vue在項目編譯的時候就會將導入的組件，如Header組件的內容給渲染進App.vue中<Header/>標簽所在的位置，注意，此時還有一個<router-view/>標簽可以看作是一個占位符，先搶到這個位置；
在Header組件中的router-link標簽被渲染成一個a標簽，所以我們在首頁可以很清楚的看到有個鏈接，當我們點擊這個鏈接的時候，就會根據路由，會匹配到HelloWorld組件，同時會把這個組件渲染到上一步說到的那個占位符的位置
3.總結
其實vue-cli簡化了我們需要做的操作，而且全程我們感覺不到路由，主要是有很多定義的文件需要我們去好好看看，這次只是簡單的測試了一下vue-cli，下一篇我准備簡單的實現一下Vue動態綁定數據，總感覺不懂其中的原理用Vue寫東西總是雲里霧里的，賊難受啊