1.按Win+R，然后在文本框中輸入cmd，回車打開命令行，輸入vue-cli安裝命令：
npm install vue-cli -g
這里的-g代表全局安裝。
2.新建Vue項(xiàng)目的命令：
Vue init webpack movie_view
3.進(jìn)入項(xiàng)目所在的文件目錄：
cd /Users/paperclouds/Desktop/movie_view
4.安裝項(xiàng)目需要的插件：
npm install
5.運(yùn)行項(xiàng)目：
npm run dev
（1）項(xiàng)目文件結(jié)構(gòu)：
build文件夾：針對(duì)打包命令npm run build或者其他命令中的打包配置和工具等。
config文件夾：項(xiàng)目的基本配置、相關(guān)測(cè)試、生產(chǎn)環(huán)境的啟動(dòng)端口，不同的配置有自己的不同的配置文件。
node_modules文件夾：由命令npm install自動(dòng)生成的node使用插件的所在地，這個(gè)文件夾在不同的系統(tǒng)中是不同的，一般打包或者通過版本控制會(huì)將其忽略。
src文件夾：為開發(fā)者編寫的代碼。
（2）src文件夾中的文件結(jié)構(gòu)：
assets文件夾：主要用于放置靜態(tài)頁面中的圖片或其他靜態(tài)資源。
components文件夾：一般的編寫組件代碼是在該文件夾中的，現(xiàn)在該文件中是自動(dòng)生成的HelloWorld.vue文件。
router文件夾：其中放置著項(xiàng)目中的路由。
在src文件夾中還有兩個(gè)文件，一個(gè)是作為入口頁面的App.vue文件，另一個(gè)是main.js文件。
App.vue文件的代碼如下：
<template>
<! -- 定義顯示的節(jié)點(diǎn) -->
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
//邏輯部分代碼，建立Vue實(shí)例
export default {
name: 'App'
}
</script>
<! -- 樣式規(guī)定 -->
<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>
這里使用了一個(gè)<template></template>標(biāo)簽，引入了一個(gè)Vue.js的LOGO，其位置位于assets靜態(tài)文件下。在LOGO的下方調(diào)用了路由的頁面，默認(rèn)是“/”路由。
（3）接著可以看一下路由文件，也就是位于router文件夾中的index.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: 'HelloWorld',
component: HelloWorld
}
]
})
上述代碼引入了Vue.js和vue-router，通過export的方式定義了路由路徑。
（4）index.js文件中的代碼修改如下：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import NewHello from '@/components/NewHello' //引入相關(guān)的代碼包
Vue.use(Router)//使用引入的包
export default new Router({
//定義路由
routes: [
{
path: '/',
name: 'Hello',
component: HelloWorld
},
{
path:'/HelloWorld',
name:'HelloWorld',
component:NewHello
}
]
})
注意：這里定義新的路由后，如果使用了插件要記得使用import方式引入使用過的組件。
（5）接著需要在componets中建立一個(gè)名為NewHello.vue的新組件，作為router中引入的文件，在此文件中編寫代碼如下：
<! --HTML頁面代碼部分-->
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
//邏輯部分代碼，建立頁面實(shí)例
export default {
name: 'NewHello',
data () {
return {
msg: 'Hello World'
}
}
}
</script>
（6）使用如下命令運(yùn)行代碼：
npm run dev
網(wǎng)頁會(huì)自動(dòng)打開http://localhost:808/#/，顯示原來HelloWorld.vue組件中的內(nèi)容。在地址欄中輸入新的頁面地址http://localhost:808/#/HelloWorld，進(jìn)入編寫的NewHello頁面，顯示效果如圖所示：
啟動(dòng)生產(chǎn)模式（打包）：
npm run build
同時(shí)會(huì)在項(xiàng)目文件夾中新生成一個(gè)dist文件夾，其中只有index.html及一個(gè)靜態(tài)資源文件夾：
用php自帶的測(cè)試服務(wù)器進(jìn)行測(cè)試，進(jìn)入dist文件夾，使用如下命令啟動(dòng)服務(wù)器：
php -S 127.0.0.1:9999
在瀏覽器中輸入http://127.0.0.1:9999/#/，打開頁面，顯示效果和測(cè)試服務(wù)器的效果一致，同時(shí)命令提示行也顯示此時(shí)的訪問資源內(nèi)容。
