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({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CSDN技术头条

开发桌面应用,自然用 Electron !

可能很多读者会感到奇怪,本来是说 Electron,为什么一开始要提到 Node.js 和 JavaScript 呢?它们是什么关系呢?别急,听我慢慢道来。

63920
来自专栏码匠的流水账

聊聊flink的RestClusterClientConfiguration

本文主要研究一下flink的RestClusterClientConfiguration

20130
来自专栏Jerry的SAP技术分享

一个最简单的WebSocket hello world demo

https://github.com/i042416/KnowlegeRepository/blob/master/practice/nodejs/server...

42940
来自专栏前端探索

即刻起,加速您的前端构建

影响前端发布速度的有两个方面,一个是构建,一个就是压缩,把这两个东西优化起来,可以减少很多发布的时间。

1K250
来自专栏运维经验分享

Nginx 防御CC攻击的两种方法 原

CC攻击可以归为DDoS攻击的一种。他们之间都原理都是一样的,即发送大量的请求数据来导致服务器拒绝服务,是一种连接攻击。CC攻击又可分为代理CC攻击,和肉鸡CC...

33440
来自专栏前端小叙

移动网页广告引入mraid.js使用指南

在网上找mraid相关资料,相对比较少,大多都是API介绍,概念介绍等,没有一份详细的移动端网页广告使用教程,经过自己两天的摸索,完成了开发的移动端网页版的广告...

21530
来自专栏我就是马云飞

2019 年 11 个受欢迎的 JavaScript 动画库!

超过46K的star,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL。这个库提供了canvas、 svg、CSS3D 和 WebGL渲...

19220
来自专栏工作专用1

jquery.fileDownload.js插件导出excel

因为使用ajax导出excel会出现问题,所以现在使用jQuery.fileDownload.js插件来解决导出excel的问题

33500
来自专栏Fundebug

JavaScript 的 4 种数组遍历方法: for VS forEach() VS for/in VS for/of

我们有多种方法来遍历 JavaScript 的数组或者对象,而它们之间的区别非常让人疑惑。Airbnb 编码风格禁止使用 for/in 与 for/of,你知道...

16740
来自专栏娱乐心理测试

文件解析错误 SyntaxError: Unexpected token / in JSON at position 0

在微信开发者工具上运行,发现报如上图所示的错误,打开相应.json的目录文件,发现代码被注释掉了,即main.json里空的。

49630

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励