• vue2项目搭建过程


    # 检查本地是否安装node:node-v

       如果没有安装则从官网上下载对应的node安装即可

    # 检查npm版本:npm -v

        如果版本太低可以通过npm install -g npm进行升级

    # 安装node.js里面集成了npm,使用npm命令获取淘宝镜像的cnpm

        npm install -g cnpm --registry=https://registry.npm.taobao.org

    # 全局安装webpack:cnpm install webpack -g

    # 安装vue-cli脚手架:cnpm install vue-cli -g

    # 安装vue:cnpm install vue

    ----------------

    # 创建一个基于webpack模板的新项目:vue init webpack demo

    # 进入项目目录:cd demo

    # 安装依赖:cnpm install

    # 运行项目:cnpm run dev

    ----------------

    # 安装vue-router:cnpm i vue-router --save-dev

    # 安装Vuex:cnpm i vuex -S

    # 安装axios用于发起请求:cnpm i axios -S

    # 用于编译scss文件:cnpm i --save-dev sass-loader node-sass 

    ----------------

    # 使用element-ui(用于后台管理):cnpm i element-ui

       在app.vue引入element-ui

       import Element from 'element-ui'
       import 'element-ui/lib/theme-chalk/index.css' 

       Vue.use(Element)

    ----------------

    # 使用mint-ui(用于移动端):cnpm i mint-ui -S

       在app.vue引入element-ui

       import Element from 'element-ui'
       import 'element-ui/lib/theme-default/index.css'

       Vue.use(Element)

       借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
       首先,安装 babel-plugin-component: cnpm install babel-plugin-component -D

       然后,将 .babelrc 修改为:
       {
          "presets": [
              ["es2015", { "modules": false }]
           ],
           "plugins": [["component", [
              {
               "libraryName": "mint-ui",
               "style": true
              }
            ]]]
        }

     ----------------

    # 浏览器兼容性处理:cnpm i -S babel-polyfill

      在main.js中导入:import 'babel-polyfill'

      在webpack.base.conf.js中修改entry配置: app: ["babel-polyfill", "./src/main.js"]

      ----------------

    # 导出功能(将页面表格数据导出Excel)

        需要安装三个依赖:

        npm install -S file-saver xlsx

        npm install -D script-loader

        项目中新建一个文件夹:(vendor---名字任取)

      里面放置两个文件Blob.js和 Export2Excel.js。

        Blob.js和 Export2Excel.js文件:链接: http://pan.baidu.com/s/1nvSdw85 密码: 5qhi

        在.vue文件中  写这两个方法:其中list是表格的内容
        export2Excel() {
          require.ensure([], () => {
            const { export_json_to_excel } = require('../../vendor/Export2Excel');
            const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名'];
            const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name'];
            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]))
        }

       如果webpack报解析错误:

     在build----webpack.base.conf.js中resolve的alias(配置别名)加入 'vendor': path.resolve(__dirname, '../src/vendor'),

     

     导出功能参考链接:http://www.cnblogs.com/Mrfan217/p/6944238.html

  • 相关阅读:
    JS仿FLASH特效可跳转回首页的CSS二级联动菜单
    来自Individuality纯CSS打造的笔记本样式的菜单导航
    Jquery仿Flash效果的3款滑动菜单
    简约漂亮的JS下拉风格的导航条
    还不错来自老外的Milonic DHTML/JavaScript Menu菜单导航
    摘自当当网的36类商品分类菜单
    纯CSS实现的蓝色竖向导航代码
    JS打造可折叠展开的导航菜单(Slashdot Menu)
    纯CSS打造的圆角下拉导航菜单
    Jquery仿FLASH特效超漂亮的CSS菜单
  • 原文地址:https://www.cnblogs.com/ylqf/p/7598168.html
Copyright © 2020-2023  润新知