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>
这里使用了一个标签，引入了一个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/#/，打开页面，显示效果和测试服务器的效果一致，同时命令提示行也显示此时的访问资源内容。
