Vue cli入门 原
最近看到一个vue cli入门的例子，写的非常详细，对入门vue cli很有帮助，原文链接
http://blog.csdn.net/sinat_17775997/article/details/70482291
我按照此例，完整的写了一遍代码，并稍微修改下
首先 vue cli 安装，我已写过一个博客https://my.oschina.net/u/2612473/blog/1535690，
dist文件夹是npm run build生成后的文件夹，包含项目最终使用的文件
src文件夹是我们主要操作的文件夹
根目录下的index文件为入口页面，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>manage</title>
</head>
<body>
<div id="app1"></div>
<!-- built files will be auto injected -->
</body>
</html>index.html头部跟正常的html页面一样，body里面的div 的 id 与main.js 实例化vue el属性值一致
src下面的App.vue 页面入口文件
<template>
<div id="app1">
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>
<script>
// export default {
// name: 'app'
// }
</script>
<style>
@import './assets/css/public.css';
#app1 {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
}
table tr th,
table tr td {
border: 1px solid #ccc;
padding: 6px;
}
</style><router-view></router-view>为路由出口
可以在此页面中引用外部样式@import './assets/css/public.css'，也可在此页面中写公用的样式 如果style元素中含有scoped属性则此段样式只对当前页面有效
main.js-程序入口文件，加载各种公共组件
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import router from './router'
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app1',
router,
template: '<App/>',
components: { App }
})main.js主要import引用vue文件夹，App.vue 组件，ui组件，以及路由文件夹（import默认查找的位置是node_modules，如果引用这个文件里的文件，则直接引用） 如果引用其他文件夹的文件 要写上路径
router中的index.js是设置路由的，即在<router-view></router-view>中展示的内容
import Vue from 'vue'
import Router from 'vue-router'
import Index from '../views/index/index'
import Manage from '../views/manage/index'
Vue.use(Router)
export default new Router({
routes: [
// {
// path: '/',
// name: 'Hello',
// component: Hello
// }
{
path: '/',
name: 'Index1',
component:Index
},
{
path: '/manage',
name: 'Manage',
component:Manage
}
]
})此例中首先要import引入vue文件夹，vue-router文件夹，路由的2个页面模板，然后使用路由Vue.use(Router)，紧接着着把路由暴露出export default new Router({}）用来展示<router-view></router-view>视窗口的内容
路由中的2个页面分别介绍 一个是view->index->index.vue页面
<template>
<div>欢迎来到人员管理系统
<footer-nav v-bind:class="{'isIndex':isnowPage}"></footer-nav>
</div>
</template>
<script>
import FooterNav from '@/components/footer.vue'
export default{
components:{
FooterNav
},
data(){
return{
isnowPage:true
}
}
}
</script>特别注意模板里面的内容都必须要用一个div包裹，此页面有个欢迎标语，以及一个footer的组件 首先在模板中写一个组件<footer-nav v-bind:class="{'isIndex':isnowPage}"></footer-nav> 下面的js引用组件并且export 组件与数据函数，注意：引入组件的名称与template组件的名称一致，并且首字母大写，并省略中间短线，
footer.vue页面
<template>
<div class="footer fixed">
<ul>
<li><router-link to="/">首页1</router-link></li>
<li><router-link to="/manage">人员管理</router-link></li>
</ul>
</div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
li a{display: inline-block; width: 100%; height:100%;}
.footer{width:100%; height:50px; bottom:0;}
ul{display: flex; height:100%; line-height:50px;}
ul li{flex: 1; background-color:#f1f1f1;}
.isIndex li:first-child{background-color:#029dd0;}
.isIndex li:first-child a{color:#fff;font-weight:bold;}
.isManage li:last-child{background-color:#029dd0;}
.isManage li:last-child a{color:#fff;font-weight:bold;}
</style>由于footer.vue每个页面都用，作为一个公用组件，我们放在components文件夹下，footer.vue页面使用router-link来导航，router-link最终生成a标签 设置isIndex 与 isManage 的样式，主要是<router-view>显示当前页面时的样式区分
另一个页面功能view->manage->index.vue
<template>
<div>
<div style="margin-bottom:15px;">
<el-button type="primary" v-on:click="add">新增</el-button>
</div>
<div class="input-area" v-show="showAdd">
<el-input placeholder="请输入内容" v-model="nameValue">
<el-button slot="append" v-on:click="addName">确定</el-button>
</el-input>
</div>
<table style="width:100%;margin-top:20px;">
<tr>
<th>姓名</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in peoples">
<td>{{item.name}}</td>
<td v-bind:id="index"><a v-on:click="editName">编辑</a> <a v-on:click="del">删除</a></td>
</tr>
</table>
<div class="wrap" v-show="showEdit">
<div class="content">
<input type="text" placeholder="请输入新名称" v-model="newName">
<button v-on:click="cancel">取消</button>
<button v-on:click="editOk">完成</button>
</div>
</div>
<footer-nav v-bind:class="{'isManage':isnowPage}"></footer-nav>
</div>
</template>
<script>
import FooterNav from "../../components/footer.vue"
export default {
components: {
FooterNav
},
data() {
return {
isnowPage: true,
showAdd: false,
showEdit: false,
peoples: [{ "name": "jack" }, { "name": "joe" }],
nameValue: "",
newName: "",
editId: 0,
}
},
methods: {
add() {
this.showAdd = true
},
addName() {
var v = this.nameValue
if (v.trim() == "") {
alert("请输入新增人员姓名")
} else {
var data = {}
data.name = v
this.peoples.push(data)
this.nameValue=""
}
},
del(e) {
var id = e.target.offsetParent.id
this.peoples.splice(id, 1)
},
editName(e) {
this.showEdit = true
this.newName=""
var id = e.target.offsetParent.id
this.editId = id
},
cancel() {
this.showEdit = false
},
editOk(e) {
var newname = this.newName
if (newname.trim() == "") {
alert("请输入新姓名")
} else {
this.peoples[this.editId].name = newname
this.showEdit = false
}
}
}
}
</script>
<style scoped>
a{color:red;}
</style>这个模板主要采用v-for="(item,index) in peoples把数据循环进表格中，并把id与index绑定，便于后面的删除与编辑操作（指定那个id的元素的父级被删除或者编辑）
<tr v-for="(item,index) in peoples"> <td>{{item.name}}</td> <td v-bind:id="index"><a v-on:click="editName">编辑</a> <a v-on:click="del">删除</a> </td> </tr>
(adsbygoogle = window.adsbygoogle || []).push({});