安装 node.js 从 nodejs.org 下载node.js的安装包，比如windows版的，安装后可以在命令行输入node -v查看版本号
node -v 查看node.js版本号
npm -v 查看npm版本号
npm install -g cnpm --registry=http://registry.npm.taobao.org 安装npm国内镜像cnpm
npm install -g vue-cli 安装vue-cli脚手架构建工具
vue init webpack demo 新建项目，demo是项目名称，除vue-router路由建议安装外，其它可以不装
cnpm install 新建的项目，需要安装所需要依赖模块，直接在项目目录下运行cnpm install安装
npm run dev 运行项目，要切换到项目根目录下
运行的相关配置在config\index.js里，比如资源目录、运行端口号等
ElementUI网站 http://element-cn.eleme.io/#/zh-CN/component/layout
npm i element-ui -S 安装element-ui，需要在项目目录下运行
安装完成后，修改项目的main.js，导入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
在new Vue({})前加上Vue.use(ElementUI)启用ElementUI
npm run build 编译项目，生成dist目录，把目录下的复制到服务器上就完成发布了
路由中切换页面和携带参数的方式：
<router-link :to="{name:'test', params: { userId: 123 }}">以命名跳转到test并带post参数</router-link>
<router-link :to="{path:'/test', query: { xxx: 'ooo' }}">以路径跳转到test并带get参数</router-link>
<!-- this.$router.push({ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }});
编程跳转写在一个函数里面，通过click等方法来触发；接收参数则用 this.$route.query.name 和
this.$route.params.name，注意 $router 和 $route 的区别。 -->
路由中子页获取参数的方式：
传进来参数：<br>
params:{{$route.params}}<br>
query:{{$route.query}}<br>
<router-link to="/">返回HelloWorld</router-link>
事件和对应js函数的写法：
<button @click="showCon('你好啊。。。')">chrome控制台里输出内容</button>
<script>
export default {
name: 'test',
data () {
return {
msg: '这是切换页面用的测试！'
}
},
mounted(){ //这个和created一样，执行一次，但这个是在网页加载完成后执行，参考生命周期示意图
//在chrome控制台输出参数
console.log(this.$route.params);
console.log(this.$route.query);
},
methods:{ //这个主要拿来写js函数，比如ajax请求一类的
showCon:function(str){
if(str!=''){
console.log(this.msg //取页面中的其它变量
+'|'+str);
}
}
}
}
</script>
注意：methods中可以带$event参数，传递鼠标点击的事件和属性，写法如showCon('你好',$event)
ajax请求示例：
<button @click="send">发送AJAX请求</button>
注意：以下函数是在methods块里面
send(){
axios({
method:'get',
url:'/', //直接请求一下首页内容吧
}).then(function(resp){
console.log(resp.data);
}).catch(resp => {
console.log('请求失败：'+resp.status+','+resp.statusText);
});
}
跨域调用接口的解决方法：
打开 config/index.js
找到 proxyTable:{}, 改为
proxyTable: {
'/api': {
target: 'http://localhost:8833/www/', //设置调用接口域名和端口号别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': '/' //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
// 比如我要调用'http://0.0:8080/user/add'，直接写‘/api/user/add’即可 代理后地址栏显示/
}
}
},
然后就可以在js里使用 /api/test.api 这种地址了，比如：
test(){
axios({
method:'get',
url:'/api/test.api',
}).then(function(resp){
console.log(resp.data);
}).catch(resp => {
console.log(resp);
});
}
vue生命周期示意图：
最后，附非vue-cli模式的，直接引用js的另一种方式代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</html>