一、安装(cmd)
1、全局安装vue
cnpm install --global vue-cli
2、cd到需要创建项目的文件夹下
3、创建项目 项目是基于webpack的
vue init webpack my-project(项目名称)
4、安装依赖库
cd 项目
cnpm i
5、启动文件
npm start
6、安装成功
二、vue目录
1、项目安装成功界面(http://localhost:8080/#/)
2、项目目录
build | 项目构建(webpack)相关代码 |
config | 配置目录,包括端口号等。我们初学可以使用默认的。 |
node_modules | npm 加载的项目依赖模块 |
src |
这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
|
static | 静态资源目录,如图片、字体等。 |
test | 初始测试目录,可删除 |
.xxxx文件 | 这些是一些配置文件,包括语法配置,git配置等。 |
index.html | 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。 |
package.json | 项目配置文件。 |
README.md | 项目的说明文档,markdown 格式 |
三、成绩表练习
main.js App.vue项目入口文件
index.html 首页入口文件
Achievement.vue 成绩单组件
index.js 路由
import Vue from ‘vue‘ import Router from ‘vue-router‘ // import HelloWorld from ‘@/components/HelloWorld‘ //导入Achievement组件 import Achievement from ‘@/components/Achievement‘ Vue.use(Router) export default new Router({ // 路由 routes: [ { path: ‘/‘, name: ‘Achievement‘, component: Achievement } ] })
App.vue 项目入口
<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: ‘App‘ } </script> <style> #app { text-align: center; margin-top: 60px; } </style>
Achievement.vue 成绩单组件
<template> <div class="achievement"> <h1>成绩单</h1> <div> <table cellpadding="0" cellspacing="0" border="1"> <tr> <td :class="th">姓名</td> <td :class="th">性别</td> <td :class="th">分数</td> <td :class="th">操作</td> </tr> <tr v-for="(item,index) in arr"> <td>{{item.username}}</td> <td>{{item.sex}}</td> <td>{{item.grade}}</td> <td> <a href="#" @click="delClick(index)">删除</a> </td> </tr> </table> </div> <div class="addclass"> 姓名: <input type="text" class="texts" v-model="username"> 性别: <select v-model="sex"> <option value ="男" selected>男</option> <option value ="女">女</option> </select> 分数: <input type="text" class="texts" v-model="grade"> <input type="button" class="addbutton" value="添加" @click="addClick"> </div> </div> </template> <script> export default { name: ‘Achievement‘, data () { return { th:"ths", username: "", sex:"", grade:"", arr: [{username:"小赵", sex:"男", grade:90},{username:"小钱", sex:"女", grade:80},{username:"小孙", sex:"男", grade:70},{username:"小李", sex:"女", grade:60}] } }, methods: { addClick () { if (isNaN(this.grade)||this.grade == ""){ alert("分数输入错误!") } else if (this.username == ""){ alert("请输入姓名!") } else if (this.sex == ""){ alert("请选择性别!") } else{ this.arr.push({username:this.username, sex:this.sex, grade:this.grade}); } }, delClick (index) { this.arr.splice(index,1); } } } </script> <!-- "scoped" 意思是此样式只对本组件有用 --> <style scoped> table { font-size: 25px; margin: 0 auto; } .ths { font-weight: bold; background: #F0F0F0; } td { height: 50px; width: 150px; } a { text-decoration: none; color: red; } .addclass { font-size: 25px; line-height: 30px; margin-top: 30px; } .texts { height: 30px; width: 80px; } .addbutton,select { height: 35px; width: 60px; } </style>
原文:https://www.cnblogs.com/liluning/p/10407909.html