一、安装环境
废话就不多少了,我首先在电脑装了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>