vue構(gòu)建的基礎(chǔ)配置

本文出自實(shí)踐哈哈哈哈

# 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 更改配置自動(dòng)打開瀏覽器

//找到/config/index.js文件，你會(huì)發(fā)現(xiàn)很多參數(shù)配置都在里面

// 各種設(shè)備設(shè)置信息

host: 'localhost', //主機(jī)名

port: 8080, // 端口號(hào)（默認(rèn)8080）

autoOpenBrowser: false,//是否自動(dòng)打開瀏覽器

//想讓瀏覽器自動(dòng)打開，只需將false改為true即可领炫，為防止端口號(hào)沖突，這里也可以隨意更改端口號(hào)

3 打包之后無(wú)法本地打開

更改config/index.js下build的assetsPublicPath屬性值為"./"侨拦，妥

4 使用axios? npm install axios --save

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

Vue.prototype.$axios = axios; //添加axios到Vue的原型對(duì)象上

5 vue項(xiàng)目打包后資源相對(duì)引用路徑的和背景圖片路徑問題

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

2、在build => util.js 里找到ExtractTextPlugin.extract增加一行：publicPath: '../../'险毁，主要解決背景圖片路徑的問題霍衫。

6 vue? 線上請(qǐng)求出問題

http://www.reibang.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中創(chuàng)建了一個(gè)global.scss文件敦跌。并在mainjs引入 import './assets/global.scss'

在組件中的style標(biāo)簽添加lang="scss"澄干，就OK了逛揩。

8 vue中使用axios

安裝axios：cnpm install axios

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

將axios全局掛載到VUE原型上：Vue.prototype.$axios=Axios

//方法一傳遞參數(shù)

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

? ? ? params: {? ? ? ? ? ? ? ? ? ? ? ? ? //參數(shù)

? ? ? ? page: this.page,

? ? ? ? limit: this.limit,

? ? ? },

? ? }).then(res => {? ? ? ? ? ? ? ? ? //請(qǐng)求成功后的處理函數(shù)? ?

? ? ? this.isLoading = false;

? ? ? this.items = res.data.data;

? ? ? console.log(this.items);?

? ? }).catch(err => {? ? ? ? ? ? ? ? //請(qǐng)求失敗后的處理函數(shù)?

? ? ? console.log(err)

? ? })

//方法二傳遞參數(shù)

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

或

this.$axios({?

? ? ? ? ? ? url: '/api/Auto',

? ? ? ? ? ? method: 'get',

? ? ? ? ? //params參數(shù)必寫 , 如果沒有參數(shù)傳{}也可以

? ? ? ? ? ? data:{

? ? ? ? ? ? }

? ? ? ? ? })

? ? ? ? ? .then((res)=>{

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

? ? ? ? ? ? this.codeId=res.data.code;

? ? ? ? ? })

? ? ? ? ? .catch((err)=>{

? ? ? ? ? ? console.log(err)

? ? ? ? ? })

9 設(shè)置axios 請(qǐng)求攔截

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

import axios from './assets/js/axios';? //并依據(jù)創(chuàng)建文件

Vue.prototype.$axios = axios; //添加axios到Vue的原型對(duì)象上

axios文件

import Axios from 'axios';

var root = process.env.API_ROOT;

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

const axios = Axios.create();

//請(qǐng)求攔截

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

? ? //請(qǐng)求之前重新拼裝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: '""'? //線上請(qǐng)求前綴

? API_ROOT: '"http://47.99.201.159:9025"'? //線上請(qǐng)求前綴

10 移動(dòng)端長(zhǎng)按復(fù)制文本

當(dāng)e.prenventDefault()無(wú)效時(shí)試試這個(gè)

*{

? -webkit-touch-callout:none;? /*系統(tǒng)默認(rèn)菜單被禁用*/

? -webkit-user-select:none; /*webkit瀏覽器*/

? -khtml-user-select:none; /*早期瀏覽器*/

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

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

? user-select:none;

}

如果頁(yè)面上有input框也會(huì)被禁止輸入，記得加上這個(gè)

input{

? -webkit-user-select: auto;

}

11 項(xiàng)目中使用svg圖片

? 1. 安裝依賴：npm install svg-sprite-loader --save-dev

? 2. 配置build文件夾中的webpack.base.conf.js麸俘，主要在兩個(gè)地方添加代碼辩稽，如下所示

? ? 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中內(nèi)容如下

? <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文件內(nèi)容如下

? 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. 在頁(yè)面使用

? <svg-icon icon-class="test"></svg-icon>

12 修改第三方ui框架使用穿透函數(shù)不生效問題在全局css修改

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

14全局注冊(cè)組件

// 以下是注冊(cè)組件的方法

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

Vue.component("NavBar",NavBar); // 全局注冊(cè)組件

15 iview-admin npm i 報(bào)錯(cuò)問題

在使用2.0+版本iview-admin的時(shí)候，npm? i 報(bào)錯(cuò)

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

可能由五種問題出現(xiàn)

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

3 npm config get proxy

返回null

4 執(zhí)行npm config get https-proxy

也返回null

如果3和4你的機(jī)器返回的都不是null的話? 需要執(zhí)行

npm config set proxy null

npm config set https-proxy null

5 執(zhí)行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等組件不能自適應(yīng)的問題

在父元素加 :style="widthMain"

data? ? ? ? widthMain:{width:''},//table組件自適應(yīng)

created() {

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

? ? this.getWidth()

? },

? destroyed () {

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

? },

? method //table組件處理函數(shù)

? ? ? getWidth:function(){

? ? ? ? ? ? ? var wid =document.body.clientWidth;? ? ? ? //網(wǎng)頁(yè)可見區(qū)域?qū)?body)

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

? ? ? },

17? vue element 純導(dǎo)出功能

npm install --save xlsx file-saver

import FileSaver from 'file-saver';

import XLSX from 'xlsx';

導(dǎo)出函數(shù)---wb為需要導(dǎo)出的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? 導(dǎo)出 https://www.cnblogs.com/aidixie/p/9606855.html

? https://pan.baidu.com/s/1PvP-NxmONNh71SRDvlL_9A 密碼：3h82

? 在項(xiàng)目下還有有以下操作：

　　　　npm install -S file-saver //用來生成文件的web應(yīng)用程序

　　　　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') //這個(gè)地址和頁(yè)面的位置相關(guān)喷众，這個(gè)地址是Export2Excel.js相對(duì)于頁(yè)面的相對(duì)位置

? ? ? ? ? ? const tHeader = ["支付類型","商品ID","金額","幣值","贈(zèng)送幣","說明",'操作']; //這個(gè)是表頭名稱可以是iveiw表格中表頭屬性的title的數(shù)組

? ? ? ? ? ? const filterVal = ['pay','id','money','volue','gift','address']; //與表格數(shù)據(jù)配合可以是iview表格中的key的數(shù)組

? ? ? ? ? ? const list = this.data; //表格數(shù)據(jù)，iview中表單數(shù)據(jù)也是這種格式紧憾！

? ? ? ? ? ? const data = this.formatJson(filterVal, list)

? ? ? ? ? ? export_json_to_excel(tHeader, data, '列表excel') //列表excel? 這個(gè)是導(dǎo)出表單的名稱

? ? ? ? ? ? this.downloadLoading = false

? ? ? ? })

? ? },

? ? formatJson(filterVal, jsonData) {

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

? ? }

19 工具函數(shù)的寫法

export function square(n) {

return n * n;

}

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

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

在main.js里進(jìn)行全局注冊(cè) Vue.prototype.ajax = function (){}

在所有組件里可調(diào)用 this.ajax 以及vue.use()

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

不管你采用哪種方式到千，最終實(shí)現(xiàn)的調(diào)用方式都是 vm.api()

也就是說，兩種方法赴穗，實(shí)現(xiàn)的原理都是在Vue.prototype上添加了一個(gè)方法憔四。所以結(jié)論是“沒有區(qū)別”。

再來說說Vue.use()到底干了什么望抽。我們知道加矛，Vue.use()可以讓我們安裝一個(gè)自定義的Vue插件。為此煤篙，我們需要聲明一個(gè)install函數(shù)

// 創(chuàng)建一個(gè)簡(jiǎn)單的插件 say.js

var install = function(Vue) {

? if (install.installed) return // 如果已經(jīng)注冊(cè)過了斟览，就跳過

? install.installed = true

? Object.defineProperties(Vue.prototype, {

? ? $say: {

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

? ? }

? })

}

module.exports = install

然后我們要注冊(cè)這個(gè)插件

import say from './say.js'

import Vue from 'vue'

Vue.use(say)

這樣，在每個(gè)Vue的實(shí)例里我們都能調(diào)用say方法了辑奈。

我們來看Vue.use方法內(nèi)部是怎么實(shí)現(xiàn)的

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;

};

其實(shí)也就是調(diào)用了這個(gè)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 編輯器

http://www.reibang.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 之前的一個(gè)地方：

import 'es6-promise/auto'

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末鸠窗，一起剝皮案震驚了整個(gè)濱河市妓羊，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌稍计，老刑警劉巖躁绸，帶你破解...
沈念sama閱讀 212,718評(píng)論 6贊 492
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異臣嚣，居然都是意外死亡净刮，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,683評(píng)論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門硅则，熙熙樓的掌柜王于貴愁眉苦臉地迎上來淹父，“玉大人，你說我怎么就攤上這事怎虫∈钊希” “怎么了困介？”我有些...
開封第一講書人閱讀 158,207評(píng)論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)蘸际。經(jīng)常有香客問我座哩，道長(zhǎng)，這世上最難降的妖魔是什么捡鱼？我笑而不...
開封第一講書人閱讀 56,755評(píng)論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮驾诈，結(jié)果婚禮上缠诅，老公的妹妹穿的比我還像新娘。我一直安慰自己乍迄，他們只是感情好管引，可當(dāng)我...
茶點(diǎn)故事閱讀 65,862評(píng)論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著闯两，像睡著了一般褥伴。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上漾狼，一...
開封第一講書人閱讀 50,050評(píng)論 1贊 291
城市分裂傳說
那天重慢，我揣著相機(jī)與錄音，去河邊找鬼逊躁。笑死似踱，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的稽煤。我是一名探鬼主播核芽，決...
沈念sama閱讀 39,136評(píng)論 3贊 410
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼酵熙！你這毒婦竟也來了轧简？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 37,882評(píng)論 0贊 268
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤匾二，失蹤者是張志新（化名）和其女友劉穎哮独，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體察藐，經(jīng)...
沈念sama閱讀 44,330評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡借嗽，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,651評(píng)論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了转培。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 38,789評(píng)論 1贊 341
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡浆竭，死狀恐怖浸须，靈堂內(nèi)的尸體忽然破棺而出惨寿，到底是詐尸還是另有隱情，我是刑警寧澤删窒，帶...
沈念sama閱讀 34,477評(píng)論 4贊 333
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布裂垦，位于F島的核電站，受9級(jí)特大地震影響肌索，放射性物質(zhì)發(fā)生泄漏蕉拢。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 40,135評(píng)論 3贊 317
男人毒藥：我在死后第九天來索命
文/蒙蒙一诚亚、第九天我趴在偏房一處隱蔽的房頂上張望晕换。院中可真熱鬧，春花似錦站宗、人聲如沸闸准。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,864評(píng)論 0贊 21
一樁弒父案梢灭，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)夷家。三九已至，卻和暖如春敏释，著一層夾襖步出監(jiān)牢的瞬間库快，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,099評(píng)論 1贊 267
情欲美人皮
我被黑心中介騙來泰國(guó)打工钥顽，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留义屏，地道東北人。一個(gè)月前我還...
沈念sama閱讀 46,598評(píng)論 2贊 362
代替公主和親
正文我出身青樓耳鸯，卻偏偏與公主長(zhǎng)得像湿蛔，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子县爬，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,697評(píng)論 2贊 351

vue構(gòu)建的基礎(chǔ)配置

推薦閱讀更多精彩內(nèi)容