1. 下载node,安装直接下一步操作就按装完成，在cmd命令行查看node -v版本和npm -v版本（node安装完成时就安装了npm）。
2.输入npm install -g cnpm --registry=http://registry.npm.taobao.org ，安装淘宝镜像安装相关依赖
3.新建vue项目目录，（进入某盘符直接盘符加冒号，例如e: 进入e盘，进入新建vue项目目录,cd 进入某文件夹）
4.安装vue-cli脚手架构建工具，输入命令 npm install -g vue-cli，安装完成即可
5.用脚手架新建工程目录 vue init webpack +项目名称（在控制台输入CHCP 65001，按回车键即可将编码格式设成utf-8，再创建就不会乱码了）
解决乱码（自己感觉这一步没什么关系）
6.接下来就是询问项目的相关配置。一路yes省事儿没啥问题（会需要一段时间）
7.cd 工程名，进入到新建的项目目录文件夹下面
8.运行项目，指令npm run dev 看到如下提示就运行成功了 ，在浏览器中输入localhost:8080就可以看到运行结果
以上大致流程如下：
vue项目大致结构
小案列：main.js
import
Vue
from
'vue'
// Vue.component('my-header', {
// template: '<p>this is my header</p>'
// })
var
myHeaderChile = {
template:
'<p> i am header child</p>'
}
// eslint-disable-line
var
myHeader = {
template:
'<p>this is my header <my-header-child></my-header-child></p>',
components: {
'my-header-child'
:
myHeaderChile
},
data:
function () {
// 组件中的data需要是function来return我们所需要的数据，以免有一个组件数据改变影响其他相同组件的数据
return {
d:
1,
f:
2
}
}
}
/* eslint-disable no-new */
new
Vue({
el:
'#app',
data: {
word:
' hello world! '
},
components: {
'my-header'
:
myHeader
}
})
运行结果：
如何引入外部组件：
main.js
import
Vue
from
'vue'
// 从node-module引入的vue实例
import
App
from
'./App'
// 当前目录中引入的app跟组件
new
Vue({
el:
'#app',
data: {
word:
' hello world! '
},
// render: h => h(App)
render:
function (
h) {
// vue2.0引入外部的组件必须使用render函数进行渲染
return
h(
App)
}
})
App.vue
<
template
>
<
div
>
{{
hello}}
</
div
>
</
template
>
<
script
>
export
default {
data () {
return {
hello:
'world2'
}
}
}
</
script
>
运行结果
9.简述用脚手架（vue-cli）建立项目的优点
- 成熟的vue项目架构设计
- 本地测试服务器
- 集成打包上线方案
使用vue-cli系统要求
- Node.js(大于或等于4.X)
- git(用于下载代码)
- 一个可以使用node命令的终端