一、安装环境
废话就不多少了，我首先在电脑装了nodejs这是必不可少的。
安装完成之后，使用命令
nmp -v
就能看到版本号了
然后我需要把当前的环境镜像切换到淘宝的
npm install -g cnpm --registry=https://registry.npm.taobao.org
二、vue-cli脚手架安装，及其新建项目
npm install -g @vue/cli
npm i element-ui -S
vue create my-app
cd my-app
vue add element
三、运行
到这里，基本上就可以新建项目了。
vue ui
四、结言
在此之前，我事先看了一个小时左右的vue入门文章。
并且自己写了一个小例子，
因为之前我从来没有真正关注过vue，仅仅停留在知道有这么个东西存在，项目中也从来没有用到过，
当我弄完这个小例子，我是真感觉到了vue的强大，双向绑定的优点，比传统的js/jq为基础写的框架体验太好了
<!DOCTYPE html>
<html>
<body>
<div id="app">
<div>
<input type="text" v-model="message"/><br>
<button @click="clickText">弹出文本框</button>
<button @click="say('Hi')">sayHi</button>
</div>
<hr>
<div>
姓名：<input type="text" v-model="newPeople.name"/><br>
年龄：<input type="text" v-model="newPeople.age"/><br>
性别：<select v-model="newPeople.sex"/>
<option value="Male">男</option>
<option value="Female">女</option>
<select><br>
<button @click="createPeople">创建一个人</button>
<button @click="say('Hi')">sayHi</button>
</div>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(p,index) in people">
<td>{{ index }}</td>
<td>{{ p.name }}</td>
<td>{{ p.age }}</td>
<td>{{ p.sex }}</td>
<td :class="'text-center'">
<button @click="deletePeople(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="vue.js"></script>
<script>
var vue=new Vue({
el:"#app",
methods:{
clickText:function(){
alert(this.message);
},
say:function(mes){
alert(mes);
},
createPeople:function(){
this.people.push(this.newPeople);
},
deletePeople:function(index){
console.log("index"+index);
this.people.splice(index,1);
}
},
data:{
message:"这是一个文本框",
newPeople:{
name:'',
age:'',
sex:''
},
people:[{
name:'A',
age:'10',
sex:'男'
},
{
name:'B',
age:'11',
sex:'女'
},
{
name:'C',
age:'12',
sex:'男'
},
{
name:'D',
age:'13',
sex:'女'
},
{
name:'E',
age:'14',
sex:'女'
}]
}
})
</script>
</html>
