相对极其简单的VUE

VUE挺适合灵活的做小型的东西，比较简单，甚至可以说贼简单；但是如果单纯的就会VUE的话也是比较单薄的，因为这东西太简单了，谁都会，谁都可以直接上手，甚至UI都帮你设计好了.

这个对个人来说也好也不好,好的是,你如果就把它当做你会的众多工具中的一个，那么它很容易帮你提高开发效率；不好的就是对个人来说一点核心价值都建立不起来，你会的别人也会,很容易被替代,除非你研究的很深.

有时候看到有的同学谈论vue，简直就恨不得早几年看到vue，那还学什么框架，直接vue，而且谈论的东西也都比较浅，和我这个业余选手（根本不用，就看了半小时）水平差不多，就感觉有点没话说

结尾附上一个自己写的小项目

这个主要讲的是VUE+Element

VUE + Element

官网地址: 点击这里

入门(不针对完全不了解web框架的人)

入门看这个，很容易就上手，跟着做，2个小时(我这里是看了一会直接跟着就开始写项目，没错，就是最下面那个项目)就可以初步了解VUE框架， 点击这里

快速上手

  1. 可能会遇到各种各样的问题，导致我们的项目和elementUI就是不能一起正常的工作，怎么办呢？

最快的方式就是下载由elemnt提供的官方的快速入门框架demo，下载到本地直接安装就行. 地址点击这里

地址如下：https://github.com/ElementUI/element-starter.git

2.下载之后，进入项目，npm install ，然后npm run dev 启动

这里可能会遇到异常情况就是 ： 运行了项目，却没有反应，而且没有自动打开浏览器，该怎么办呢？
  2.1 先看有没有报错，一般红色字样
  2.2 没有报错的话，尝试将 127.0.0.1:8010直接复制到浏览器打开，有时候可能会出现不唤醒浏览器的bug

3.npm install 一直出现错误，根据提示信息看，有 4048也有提醒让用管理员权限重新运行命令的

  3.1 切换成管理员权限重新运行 npm install

  3.2 我的原因是切换npm版本,当npm版本大于等于5.4时可能会出现这个问题,切换到5.3就没有这个问题.命令:npm install -g npm@5.3

  3.3 如果已经是管理员了，现在很可能的一个问题是,删除npmrc文件.强调：不是nodejs安装目录npm模块下的那个npmrc文件；而是在C:\Users{账户}\下的.npmrc文件

组件的具体使用

首先说明一点，在具体项目的时候一般大家应该直接用3个select框而不是组件的，每次点击select框其实都是在请求后台拿到省市区数据填充到select中,这样做的好处是可以随时变更省市区范围(看产品怎么说),有什么需求变什么，不依托于外部数据(因为可能苏州的吴中区规划到了虎丘或者怎样，但是外部数据没有变更)； 或者使用公司内部自己的组件

下面是针对非特定需求的省市区联动来说

1.省市区联动(轻量组件,比较方便),这里主要讲坑

官网在这,点击这里打开官网
效果如图:

1.下载npm包

npm install v-distpicker –save

2.main.js中注册

1
2
3
import VDistpicker from 'v-distpicker'

Vue.component('v-distpicker', VDistpicker)

3.使用页面中导入

1
2
3
4
5
import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker }
}

4.如何获取选择的数据是一个问题,即使我用了VUE的debug插件依然对它们有疑惑

我的方法如下:

  4.1在使用页面的data中注册数据

1
select: { province: '', city: '', area: '' },

  4.2在使用界面的methods中声明获取省市区数据的方法

1
2
3
4
5
6
onSelected : function(data) {
                this.select.province = data.province.value
                this.select.city = data.city.value
                this.select.area = data.area.value
                console.log(this.select.province+">>>>>"+this.select.city+">>>>"+this.select.area);
            },

  4.3在template中绑定方法

1
<v-distpicker @selected="onSelected"></v-distpicker>

这样的话就可以获取到选择的数据了，如果直接select.province这样是没有用的,根据VUE的debug来看不做这样的处理，select的值是不变的(也或许是我哪里有遗漏)

2.VUE2中页面表格数据导出成excel信息

1.安装2个依赖：
npm install -S file-saver xlsx
npm install -D script-loader

2.项目src下新建文件夹 vendor

结构如下：

Blob.js和 Export2Excel.js文件：链接: http://pan.baidu.com/s/1nvSdw85 密码: 5qhi
当然也可以向我要改好的

3.在需要导出成excel的.vue文件中

写这两个方法：其中this.tableData是表格的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export2Excel() {
　　　　　　require.ensure([], () => {
　　　　　　　　 //这里请注意 网上代码此处是：../../vendor/Export2Excel
              const { export_json_to_excel } = require('../vendor/Export2Excel');
              //title
              const tHeader = ['日期', '姓名', '地址'];
              //title对应的key  如{ date: '2016-05-02', name: '王小虎',address: '上海市'}
              const filterVal = ['date', 'name', 'address'];
　　　　　　　　const list = this.tableData;
　　　　　　　　const data = this.formatJson(filterVal, list);
　　　　　　　　export_json_to_excel(tHeader, data, '列表excel');
　　　　　　})
　　　　},
　　　　formatJson(filterVal, jsonData) {
　　　　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　　　}

　　　　

4.npm run dev出现如下错误

//请注意网上代码这里是 path.resolve(dirname, ‘../src/vendor’)
webpack.config.js中resolve的alias加入 ‘vendor’: resolve(dirname, ‘../src/vendor’),

5.修改 Export2Excel.js 第三行

将三行改成如下，网上原代码这里是： ‘vendor/Blob

到这里就算完成了，这样就可以实现将表格数据导出成excel表格了

3.table组件的使用中的一个问题:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

这里当我们的表格宽度过长的时候，可能会出现表头和表数据位置不对应的问题

这个时候，可能有时候会是width的问题,这里将width=”180”改成min-width=”180”,同时给table加一个text-align: left就行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<el-table
                :data="tableData"
                style="text-align: left">
            <el-table-column
                    prop="date"
                    label="日期"
                    min-width="33%">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    min-width="33%">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    min-width="34%">
            </el-table-column>
        </el-table>

当然不出现这个问题最好

4.VUE里的全局函数

具体实施

方法一:

1
2
3
4
5
6
//在mian.js中写入函数
Vue.prototype.changeData = function (){
  alert('执行成功');
}
//在所有组件里可调用函数
this.changeData();

方法二:

1
2
3
4
5
6
7
8
9
10
11
12

// 写好自己需要的base.js文件
exports.install = function (Vue, options) {
    Vue.prototype.changeData = function (){
        alert('执行成功');
    };
};
// main.js 引入并使用
import base from './base'
Vue.use(base);
//在所有组件里可调用函数
this.changeData();

我的demo

1.对直接url访问的情况进行处理.检测是否登录，没有登录返回到登录界面

2.已经登录时，访问非权限界面时返回到首页

3.页面组件化

4.公用方法全局化或者util化

5.登入登出

6.分页

7.表格数据导出成excel文件

效果图:

登录界面

loding动作

主界面

扩展中….

赏

给我一点关爱 :)

支付宝

扫一扫，分享到微信

微信分享二维码