• 前言:

在《Vue.js权威指南》刚出版的时候,自己就作为一名前端粉捧了一把场,可是真是应了那句“出来混,总是要还的“这句话了,那时候信心满满的买来书想要认真研究,最终却还是把它搁浅了。直到最近工作上要使用它来做一个后台管理系统,才不得不逼迫自己再次重新拿起书,看起文档,努力研究这个异常流行的Vue.js。

  • 过程:

简单页面呈现如下   (图片貌似有点模糊,主要也就是实现简单的增删改查):

1.使用到的技术:

vue2.0:https://cn.vuejs.org/v2/guide/

element-ui:http://element.eleme.io/#/zh-CN

vue-router2:http://router.vuejs.org/zh-cn/

Axios:https://www.axios.com/

(在Vue1.0中我们知道和服务端通信发送请求获取数据依赖的是vue-resource,但自Vue更新到2.0之后作者就宣告不再对vue-resource更新,而是改成了推荐的Axios这一HTTP库。作用上类似我们熟知的一些Ajax库,但是Axios是基于Promise的HTTP请求客户端,可同时在浏览器和Node.js中使用,这好像更符合目前前端的技术新趋势。或者可以看这里:https://mp.weixin.qq.com/s?__biz=MzI0ODcxNDAxNQ==&mid=2247483763&idx=1&sn=2bd49b2a673800fc7726394a3791d973&chksm=e99dc703deea4e153b6442e5f248fd5aad604235b2eda57fdad8ee1e772b81f25a80f216fedb&mpshare=1&scene=23&srcid=0414mg5pg6lSZcGBzn77MVkD#rd

mock.js:http://mockjs.com/

(生成随机数字,拦截ajax请求。)

2.具体实现过程:

1)新建项目:

在这里,使用的编辑器为Visual Studio Code(vue.js的殷大神推荐的),虽然也是初次使用,不过这几天感觉也挺不错,推荐大家使用;直接可以在终端输入命令行,类似于在cmd中一样:

//全局安装 vue-cli

 npm install vue-cli -g# 
 
//创建一个基于webpack模板的新项目
 
 vue init webpack my-project
 
//安装依赖,快速启动 my-project为项目名称,可自定义

 cd my-project
 
 npm install
 
 npm run dev

至此,在浏览器:http://localhost:8080/#/便可看见建好的项目。

2)安装所需要的依赖包:

//ui组件
npm install element-ui
//拦截器
npm install npm install mockjs
//模拟请求
npm install npm install axios
 
npm install --save axios-mock-adapter
 
npm install sass-loader
 
npm install node-sass

PS:

这里根据项目中的提示,安装了好多个依赖包,如果有兴趣,可以一一研究,这里就不多做解释了。

3)安装完毕之后执行:npm run build,看项目是否报错,然后修改一下相应的文件:(完整代码:请戳这里)

main.js:

import Vue from 'vue'
import App from './App'
//引入element-ui组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import VueRouter from 'vue-router'
import routes from './router/index'
import Mock from './mock'
Mock.bootstrap(); Vue.use(ElementUI);
Vue.use(VueRouter); const router = new VueRouter({
mode: 'history',
routes
}) // 实例化vue
new Vue({
router,
// store,//vuex 提供的
render: h => h(App)
}).$mount('#app') //手动地挂载一个未挂载的实例(#app)

router/index.js:

/**
* desc: 路由配置
*/ import table from '../views/nav1/table.vue' let routes = [
{
path: '/',
component: table,
name: '',
iconCls: 'fa fa-id-card-o',
leaf: true,//只有一个节点
children: [
{
path: '/page1', component: table, name: '导航111'
}
]
},
//若均为匹配,则提示404
{
path: '*',
hidden: true,
redirect: {
path: '404'
}
}
]; export default routes;

在src中新建一个api/api.js,专门存放模拟的数据接口:

/**
* author: xxx
* create: 2017-04-26
* update: 2017-04-26 by xxx
* desc:链接后台接口的js文件(
* 在Vue1.0中我们知道和服务端通信发送请求获取数据依赖的是vue-resource,
* 但自Vue更新到2.0之后作者就宣告不再对vue-resource更新,
* 而是改成了推荐的Axios这一HTTP库。作用上类似我们熟知的一些Ajax库,
* 但是Axios是基于Promise的HTTP请求客户端,可同时在浏览器和Node.js中使用,
* 这好像更符合目前前端的技术新趋势
* )
*/
import axios from 'axios';
//基础路径
let base = ''; export const getUserListPage = params => { return axios.get(`${base}/user/listpage`, { params: params }); }; export const removeUser = params => { return axios.get(`${base}/user/remove`, { params: params }); }; export const batchRemoveUser = params => { return axios.get(`${base}/user/batchremove`, { params: params }); }; export const editUser = params => { return axios.get(`${base}/user/edit`, { params: params }); }; export const addUser = params => { return axios.get(`${base}/user/add`, { params: params }); };

一切配置完毕后,就可以见到心仪的页面了。

  • 后言:

这两天算是扎根研究vue.js吧,不仅更加了解了其使用方法,而且还认识了很多新的知识:比如拦截ajax的axios,还有mock.js,虽然都是略知一二,但是那种成就感依旧清晰在心。还有非常感谢这两天以来自己所在的vue的各种群,真的是大神无处不在,而且还很热心。3ky啦~~~无意之中,还发现CZ大神说“努力做一名全栈开发者”,我的天,如此优秀的人都在努力,那我今后得更加努力了,fighting for technology!

vue2.0+element-ui(01简单点的单页面)的更多相关文章

  1. vue2.0 + Element UI + axios实现表格分页

    注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...

  2. vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)

    对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...

  3. vue2.0+Element UI 表格前端分页和后端分页

    之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...

  4. vue2.0 + element ui 实现表格穿梭框

    element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...

  5. Element Ui使用技巧——Form表单的校验规则rules详细说明

    Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...

  6. vue2.0+element+node+webpack搭建的一个简单的后台管理界面

    闲聊: 今天是六一儿童节哟,小颖祝大家节日快乐哈哈哈.其实这个demo小颖断断续续做了将近两个礼拜了,心塞的,其实这个也没有多难,主要是小颖有点最近事情有点多,所以就把这个一直拖着,今天好不容易做好了 ...

  7. vue2.0 element学习

    1,bootstrap和vue2.0结合使用 vue文件搭建好后,引入jquery和bootstrap 我采用的方式为外部引用 在main.js内部直接导入 用vue-cli直接安装jquery和bo ...

  8. 2021新年 Vue3.0 + Element UI 尝鲜小记

    2021年,又是新的一年,Vue 已经发布 3.0 版本,最好用的 UI 组件库 Element UI 也发布了适配 Vue3.0 的新版本,是时候开始学习一下这两个新技术. 本文主要记录了使用 Vu ...

  9. 基于Vue2.0+Vue-router构建一个简单的单页应用

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...

随机推荐

  1. RTX——第18章 内存管理

    以下内容转载自安富莱电子: http://forum.armfly.com/forum.php 内存管理介绍在 ANSI C 中,可以用 malloc()和 free()2 个函数动态的分配内存和释放 ...

  2. win7下wifi密码的保存路径

    win7下wifi保存在C:\ProgramData\Microsoft\Wlansvc\Profiles\Interfaces目录下的配置文件中,xml配置文件 <?xml version=& ...

  3. 推荐10款纯css3实现的实用按钮

    在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...

  4. 使用HttpWebRequest调用wcf一段代码

    public class HttpClass { internal static HttpWebRequest _httpWebRequest; public static void Request( ...

  5. nginx 405 not allowed问题的解决

    转载自:  http://www.linuxidc.com/Linux/2012-07/66761.htm Apache.IIS.Nginx等绝大多数web服务器,都不允许静态文件响应POST请求,否 ...

  6. 【Unity】使用SceneManager加载/切换场景

    一.直接切换 老版的(已弃用!): Application.LoadLevel(int index); // 参数是场景编号 Application.LoadLevel(string name); / ...

  7. 在WMware新建一个虚拟机

  8. java——常用类的总结

    package test; import java.util.ArrayList; import java.util.HashMap; import java.util.Set; public cla ...

  9. 经典SQL回顾之晋级篇

    上篇博文在说SQL基础的时候,有一个地方有点误导大家,文中说到SQL 中的substring()和C#中的substring()相同,这有点歧义.基本原理虽然相同,但是有一点很不一样,就是C#中索引是 ...

  10. Zookeeper和分布式环境中的假死脑裂问题(转)

    Zookeeper和分布式环境中的假死脑裂问题 最近和同事聊天无意间发现他们的系统也存在脑裂的问题.想想当初在我们的系统中为了解决脑裂花了非常大的功夫,现在和大家一起讨论下脑裂,假死等等这些问题和解决 ...