1.按Win+R，然后在文本框中输入cmd，回车打开命令行，输入vue-cli安装命令：
npm install vue-cli -g
这里的-g代表全局安装。
2.新建Vue项目的命令：
Vue init webpack movie_view
3.进入项目所在的文件目录：
cd /Users/paperclouds/Desktop/movie_view
4.安装项目需要的插件：
npm install
5.运行项目：
npm run dev
（1）项目文件结构：
build文件夹：针对打包命令npm run build或者其他命令中的打包配置和工具等。
config文件夹：项目的基本配置、相关测试、生产环境的启动端口，不同的配置有自己的不同的配置文件。
node_modules文件夹：由命令npm install自动生成的node使用插件的所在地，这个文件夹在不同的系统中是不同的，一般打包或者通过版本控制会将其忽略。
src文件夹：为开发者编写的代码。
（2）src文件夹中的文件结构：
assets文件夹：主要用于放置静态页面中的图片或其他静态资源。
components文件夹：一般的编写组件代码是在该文件夹中的，现在该文件中是自动生成的HelloWorld.vue文件。
router文件夹：其中放置着项目中的路由。
在src文件夹中还有两个文件，一个是作为入口页面的App.vue文件，另一个是main.js文件。
App.vue文件的代码如下：
<template>
<! -- 定义显示的节点 -->
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
//逻辑部分代码，建立Vue实例
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>
这里使用了一个<template></template>标签，引入了一个Vue.js的LOGO，其位置位于assets静态文件下。在LOGO的下方调用了路由的页面，默认是“/”路由。
（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' //引入相关的代码包
Vue.use(Router)//使用引入的包
export default new Router({
//定义路由
routes: [
{
path: '/',
name: 'Hello',
component: HelloWorld
},
{
path:'/HelloWorld',
name:'HelloWorld',
component:NewHello
}
]
})
注意：这里定义新的路由后，如果使用了插件要记得使用import方式引入使用过的组件。
（5）接着需要在componets中建立一个名为NewHello.vue的新组件，作为router中引入的文件，在此文件中编写代码如下：
<! --HTML页面代码部分-->
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
//逻辑部分代码，建立页面实例
export default {
name: 'NewHello',
data () {
return {
msg: 'Hello World'
}
}
}
</script>
（6）使用如下命令运行代码：
npm run dev
网页会自动打开http://localhost:808/#/，显示原来HelloWorld.vue组件中的内容。在地址栏中输入新的页面地址http://localhost:808/#/HelloWorld，进入编写的NewHello页面，显示效果如图所示：
启动生产模式（打包）：
npm run build
同时会在项目文件夹中新生成一个dist文件夹，其中只有index.html及一个静态资源文件夹：
用php自带的测试服务器进行测试，进入dist文件夹，使用如下命令启动服务器：
php -S 127.0.0.1:9999
在浏览器中输入http://127.0.0.1:9999/#/，打开页面，显示效果和测试服务器的效果一致，同时命令提示行也显示此时的访问资源内容。
