vue构建的基础配置

本文出自实践 哈哈哈哈

# pc-template-mall

# apk

> A Vue.js project

## Build Setup

``` bash

# install dependencies

npm install

# serve with hot reload at localhost:8080

npm run dev

# build for production with minification

npm run build

# build for production and view the bundle analyzer report

npm run build --report

```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

1 webpack 3.+版本有bug 可以退到 2.8+

2 更改配置 自动打开浏览器

//找到/config/index.js文件,你会发现很多参数配置都在里面

// 各种设备设置信息

host: 'localhost', //主机名

port: 8080, // 端口号(默认8080)

autoOpenBrowser: false,//是否自动打开浏览器

//想让浏览器自动打开,只需将false改为true即可,为防止端口号冲突,这里也可以随意更改端口号

3 打包之后无法本地打开

更改config/index.js下build的assetsPublicPath属性值为"./",妥

4 使用axios  npm install axios --save

import axios from 'axios';//引入axios

Vue.prototype.$axios = axios; //添加axios到Vue的原型对象上

5 vue项目打包后资源相对引用路径的和背景图片路径问题

1、修改config => index.js => build => assetsPublicPath 中的'/'成为'./'

2、在build => util.js 里找到ExtractTextPlugin.extract增加一行:publicPath: '../../',主要解决背景图片路径的问题。

6 vue  线上请求出问题

https://www.jianshu.com/p/686f17737ffb

7 vue  使用scss  安装依赖包

步骤一: 安装node-sass、sass-loader、style-loader

    cnpm install node-sass --save-dev

    cnpm install sass-loader --save-dev

    cnpm install style-loader --save-dev 

步骤二: 安装sass-resources-loader

cnpm install sass-resources-loader --save-dev

步骤三: 修改build中的utils.js

scss: generateLoaders('sass')

    修改成:

    scss: generateLoaders('sass').concat(

      {

        loader: 'sass-resources-loader',

        options: {

          resources: path.resolve(__dirname, '../src/assets/global.scss')

        }

      }

    )

步骤四:在assets中创建了一个global.scss文件。并在mainjs引入 import './assets/global.scss'

在组件中的style标签添加lang="scss",就OK了。

8 vue中使用axios

安装axios:cnpm install axios

在main.js文件引入axios:import Axios from 'axios'

将axios全局挂载到VUE原型上:Vue.prototype.$axios=Axios

//方法一传递参数

this.$http.get('https://cnodejs.org/api/v1/topics',{

      params: {                          //参数

        page: this.page,

        limit: this.limit,

      },

    }).then(res => {                  //请求成功后的处理函数   

      this.isLoading = false;

      this.items = res.data.data;

      console.log(this.items); 

    }).catch(err => {                //请求失败后的处理函数 

      console.log(err)

    })

//方法二传递参数

this.$http.get('https://cnodejs.org/api/v1/topics?page=1&limit=15')

this.$axios({ 

            url: '/api/Auto',

            method: 'get',

          //params参数必写 , 如果没有参数传{}也可以

            data:{

            }

          })

          .then((res)=>{

            this.codeImgUrl="data:image/png;base64,"+res.data.msg;

            this.codeId=res.data.code;

          })

          .catch((err)=>{

            console.log(err)

          })


9 设置axios 请求拦截

// import axios from 'axios';//引入axios;

import axios from './assets/js/axios';  //并依据创建文件

Vue.prototype.$axios = axios; //添加axios到Vue的原型对象上

axios文件

import Axios from 'axios';

var root = process.env.API_ROOT;

// console.log(root+"1111")

const axios = Axios.create();

//请求拦截

axios.interceptors.request.use((config) => {

    //请求之前重新拼装url

    config.url = root + config.url;

    return config;

});

export default axios;

dev:

proxyTable: {

      '/api': { 

        // target: 'http://192.168.84.170:9005', 

        target: '', 

        changeOrigin: true, 

        pathRewrite: { 

            '^/api': '/' 

            //写'/api'就等于写'https://api.douban.com'

            //写"/api/v2/movie/top250"就等于写"https://api.douban.com/v2/movie/top250"

        } 

      }

    }

prod:添加

// API_ROOT: '""'  //线上请求前缀

  API_ROOT: '"http://47.99.201.159:9025"'  //线上请求前缀

10 移动端长按复制文本

当e.prenventDefault()无效时试试这个

*{

  -webkit-touch-callout:none;  /*系统默认菜单被禁用*/

  -webkit-user-select:none; /*webkit浏览器*/

  -khtml-user-select:none; /*早期浏览器*/

  -moz-user-select:none; /*火狐*/

  -ms-user-select:none;  /*IE10*/

  user-select:none;

}

如果页面上有input框也会被禁止输入,记得加上这个

input{

  -webkit-user-select: auto;

}

11 项目中使用svg图片

  1. 安装依赖:npm install svg-sprite-loader --save-dev

  2. 配置build文件夹中的webpack.base.conf.js,主要在两个地方添加代码,如下所示

    exclude: [resolve('src/icons')],      ------url-loader

    {                                      ------svg-sprite-loader

        test: /\.svg$/,

        loader: 'svg-sprite-loader',

        include: [resolve('src/icons')],

        options: {

          symbolId: 'icon-[name]'

        }

    },

  3. 在src/components/component下新建文件夹及文件Svg.vue中内容如下

 

 

 

  4. 在src/assets下新建svgImg文件夹,及svgImg文件夹下svg文件夹、index.js文件, index.js文件内容如下

  import Vue from 'vue'

  import SvgIcon from '@/components/component/Svg.vue'// svg组件


  // register globally

  Vue.component('svg-icon', SvgIcon)


  const req = require.context('./svg', false, /\.svg$/)

  const requireAll = requireContext => requireContext.keys().map(requireContext)

  requireAll(req)

  5. 在main.js中引入svg

  import './assets/svgImg'

  6. 在页面使用

 

12 修改第三方ui框架使用 穿透函数不生效问题 在全局css修改

13 vue打包.map文件 去掉  index.js cssSourceMap改为false

14全局注册组件

// 以下是注册组件的方法

import NavBar from './components/component/Nav.vue';

Vue.component("NavBar",NavBar); // 全局注册组件

15 iview-admin npm i 报错问题

在使用2.0+版本iview-admin的时候,npm  i 报错

code Z_BUF_ERROR npm ERR! errno -5 npm ERR! zlib: unexpected end of file

可能由五种问题出现

2  npm i babel-loader babel-core babel-preset-env babel-plugin-transform-runtime -D

3 npm config get proxy

返回null

4 执行npm config get https-proxy

也返回null

如果3和4你的机器返回的都不是null的话  需要执行

npm config set proxy null

npm config set https-proxy null

5 执行npm config set registry http://registry.cnpmjs.org/

6 npm i babel-loader babel-core babel-preset-env babel-plugin-transform-runtime -D

16  iview table等组件不能自适应的问题

在父元素加 :style="widthMain"

data        widthMain:{width:''},//table组件自适应

created() {

    window.addEventListener('resize', this.getWidth);

    this.getWidth()

  },

  destroyed () {

    window.removeEventListener('resize', this.getWidth)

  },

  method //table组件处理函数

      getWidth:function(){

              var wid =document.body.clientWidth;        //网页可见区域宽(body)

                this.widthMain.width=wid-200+'px';

      },

17  vue element 纯导出功能

npm install --save xlsx file-saver

import FileSaver from 'file-saver';

import XLSX from 'xlsx';

导出函数---wb为需要导出的table  两种方式获取,vue ref  或原生 获取

exportExcel:function() {

//  let wb =XLSX.utils.table_to_book(this.$refs.exportExcel);

let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'));

let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });

try {

FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'exportExcel.xlsx')

} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }

return wbout

},

18 vue iview  导出 https://www.cnblogs.com/aidixie/p/9606855.html

  https://pan.baidu.com/s/1PvP-NxmONNh71SRDvlL_9A 密码:3h82

  在项目下还有有以下操作:

    npm install -S file-saver //用来生成文件的web应用程序

    npm install -S xlsx //电子表格格式的解析器

    npm install -D script-loader //将js挂在在全局下

outPortxlsx() {

        this.downloadLoading = true;

        require.ensure([], () => {

            const {export_json_to_excel} = require('../../assets/js/Export2Excel') //这个地址和页面的位置相关,这个地址是Export2Excel.js相对于页面的相对位置

            const tHeader = ["支付类型","商品ID","金额","币值","赠送币","说明",'操作']; //这个是表头名称 可以是iveiw表格中表头属性的title的数组

            const filterVal = ['pay','id','money','volue','gift','address']; //与表格数据配合 可以是iview表格中的key的数组

            const list = this.data; //表格数据,iview中表单数据也是这种格式!

            const data = this.formatJson(filterVal, list)

            export_json_to_excel(tHeader, data, '列表excel') //列表excel  这个是导出表单的名称

            this.downloadLoading = false

        })

    },

    formatJson(filterVal, jsonData) {

        return jsonData.map(v => filterVal.map(j => v[j]))

    }

19 工具函数的写法

export function square(n) {

return n * n;

}

import { square } from './util.js'

console.log(square(2)); // 4

在main.js里进行全局注册 Vue.prototype.ajax = function (){}

在所有组件里可调用 this.ajax 以及vue.use()

20 Vue.prototype 和vue.use()的疑问

不管你采用哪种方式,最终实现的调用方式都是 vm.api()

也就是说,两种方法,实现的原理都是在Vue.prototype上添加了一个方法。所以结论是“没有区别”。

再来说说Vue.use()到底干了什么。我们知道,Vue.use()可以让我们安装一个自定义的Vue插件。为此,我们需要声明一个install函数

// 创建一个简单的插件 say.js

var install = function(Vue) {

  if (install.installed) return // 如果已经注册过了,就跳过

  install.installed = true

  Object.defineProperties(Vue.prototype, {

    $say: {

      value: function() {console.log('I am a plugin')}

    }

  })

}

module.exports = install

然后我们要注册这个插件

import say from './say.js'

import Vue from 'vue'

Vue.use(say)

这样,在每个Vue的实例里我们都能调用say方法了。

我们来看Vue.use方法内部是怎么实现的

Vue.use = function (plugin) {

  if (plugin.installed) {

    return;

  }

  // additional parameters

  var args = toArray(arguments, 1);

  args.unshift(this);

  if (typeof plugin.install === 'function') {

    plugin.install.apply(plugin, args);

  } else {

    plugin.apply(null, args);

  }

  plugin.installed = true;

  return this;

};

其实也就是调用了这个install方法而已。

21 echarts https://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

22 markdown 编辑器

https://www.jianshu.com/p/04376d0c9ff1

23 富文本 编辑器 https://www.cnblogs.com/wisewrong/p/8985471.html

24 vuex npm install vuex --save

25 npm install es6-promise --save

然后,将下列代码添加到你使用 Vuex 之前的一个地方:

import 'es6-promise/auto'

你可能感兴趣的:(vue构建的基础配置)