码迷,mamicode.com
首页 > 其他好文 > 详细

vue2项目搭建过程

时间:2017-09-26 19:38:45      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:sass   sdn   htm   vue   处理   网上   css   安装   https   

# 检查本地是否安装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-default/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

 

vue2项目搭建过程

标签:sass   sdn   htm   vue   处理   网上   css   安装   https   

原文地址:http://www.cnblogs.com/ylqf/p/7598168.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!