本文出自实践 哈哈哈哈
# 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中内容如下
? <template>
? ? <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
? ? ? <use :xlink:href="iconName"/>
? ? </svg>
? </template>
? <script>
? export default {
? ? name: 'SvgIcon',
? ? props: {
? ? ? iconClass: {
? ? ? ? type: String,
? ? ? ? required: true
? ? ? },
? ? ? className: {
? ? ? ? type: String,
? ? ? ? default: ''
? ? ? }
? ? },
? ? computed: {
? ? ? iconName() {
? ? ? ? return `#icon-${this.iconClass}`
? ? ? },
? ? ? svgClass() {
? ? ? ? if (this.className) {
? ? ? ? ? return 'svg-icon ' + this.className
? ? ? ? } else {
? ? ? ? ? return 'svg-icon'
? ? ? ? }
? ? ? }
? ? }
? }
</script>
? <style scoped>
? ? /* .svg-icon {
? ? ? width: 1em;
? ? ? height: 1em;
? ? ? vertical-align: -0.15em;
? ? ? fill: currentColor;
? ? ? overflow: hidden;
? ? } */
? </style>
? 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. 在页面使用
? <svg-icon icon-class="test"></svg-icon>
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'