文章目錄
2.Axio表單請求
const axiosForm = (params, url) => {
return new Promise(function (resolve, reject) {
axios({
url: url,
method: 'post',
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function (response) {
resolve(response.data)
}).catch(function (error) {
reject(error)
});
})
}
3.vue-cli 3.0集成sass/scss到vue項目
vue-cli 3提供了兩種方式集成sass/scss：
- 創建項目的時候選擇預處理器sass
- 手動安裝sass-loader
（1）方式一： - 在構建項目的時候，移動上下鍵選擇“Manually select features”，手動選擇創建項目的特性，
$ vue create vuedemo
? Please pick a preset: (Use arrow keys)
default (babel, eslint)
> Manually select features
- 移動上下鍵在CSS Pre-processors，按提示點擊空格鍵選擇CSS-processors，然後再選擇第一個SCSS/SASS作爲我們的CSS預處理器，最後完成後項目會幫我們安裝sass-loader node-sass
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
>( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
(*) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> SCSS/SASS
LESS
Stylus
（2）方式二：
- 安裝
npm install -D sass-loader node-sass
- 使用
<style lang="scss">
$color = yellow;
</style>
感謝★,°:.☆(￣▽￣)/$:.°★ 。碼經筆記
4.scss與sass的不同寫法
scss:與css類似
<style lang="scss">
h1 {
color: red;
}
</style>
sass:不能使用大括號，使用回車和至少兩個空格來區分選擇器和規則
<style lang="sass">
h1
color: red
</style>
如果你使用了lang=“sass”，卻使用了大括號{}，那就會報如下錯誤：
5.vue路由傳遞並獲取參數（參數爲對象）
傳遞參數方式一：
<router-link
:to="{
path: 'yourPath',
params: {
name: 'name',
dataObj: data
},
query: {
name: 'name',
dataObj: data
}
}">
</router-link>
傳遞參數方式二：
<template>
<button @click="sendParams">點擊傳遞參數</button>
</template>
<script>
export default {
data () {
return {
msg: 'xxxxx'
}
},
methods: {
sendParams () {
this.$router.push({
path: 'yourPath',
name: '需要跳轉的那個路由名稱',
params: {
name: 'name',
dataObj: this.msg
}
})
}
}
}
</script>
- path -> 是要跳轉的路由路徑,也可以是路由文件裏面配置的 name 值,兩者都可以進行路由導航
- params -> 是要傳送的參數,參數可以直接key:value形式傳遞
- query -> 是通過 url 來傳遞參數的同樣是key:value形式傳遞
獲取參數：
<template>
<h3>msg</h3>
</template>
<script>
export default {
data () {
return {
msg: ''
}
},
methods: {
getParams () {
// 取到路由帶過來的參數
let routerParams = this.$route.params.dataobj
// 將數據放在當前組件的數據內
this.msg = routerParams
}
},
watch: {
// 監測路由變化,只要變化了就調用獲取路由參數方法將數據存儲本組件即可
'$route': 'getParams'
}
}
</script>
6.webpack指令
- 刪除全局webpack-cli：
npm uninstall -g webpack-cli - 刪除本地webpack-cli:
npm uninstall webpack-cli - 刪除全局webpack
npm uninstall -g webpack - 刪除本地webpack
npm un webpack - 全局安裝webpack:（官網不推薦）
npm install --global webpack - 本地安裝webpack:
npm install --save-dev webpack - 本地安裝webpack -cli (使用 webpack 4+ 版本)
npm install --save-dev webpack-cli
檢查webpack是否安裝成功,出現版本號爲成功。
如果是全局安裝則：webpack -v
如果是本地安裝則：node_modules.bin\webpack -v (注意是斜杆的方向)
7.解決vue中console.log打印報錯問題
報錯：error: Unexpected console statement (no-console) at src\App.vue:29:5:、
在根目錄創建.eslintrc.js文件
內容：
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}
8.獲取自定義屬性
<div v-for="item in list" :key="item.id" :data-id="item.id" @click="col($event)">
col(){
console.log(e.target.getAttribute('data-id'))
}
9.axios的跨域解決方法
假設你請求的完整接口地址爲：
http://xxxxxx.cn:8321/api/AgriBaseService/queryAgriBaseGoods
那麼在根目錄創建vue.config.js文件，添加配置信息如下：
module.exports = {
publicPath: "./",
assetsDir: "assets",
devServer: {
port: 8080,
open: true, //配置自動啓動瀏覽器
proxy: {
'/api': {
target: 'http://xxxxxx.cn:8321/api/', //對應自己的接口
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
最終請求的接口被代理爲：
http://localhost:8080/api/AgriBaseService/queryAgriBaseGoods
10.vue頁面跳轉的兩種方式
- 標籤跳轉
<router-link to='two.html'><button>點我到第二個頁面</button></router-link>
- 點擊事件跳轉
<button @click="hreftwo" class="test-one">點我到第二個頁面</button>
methods:{ //跳轉頁面
hreftwo(){
this.$router.push({ path:'/two.html' })
}
}
11.vue請求服務器圖片403報錯
解決辦法：
在index.html中的head中添加
<meta name="referrer" content="no-referrer" />
就可以了
12.data中如何正確定義圖片路徑
export default {
data() {
return {
imgSrc: '../../assets/images/icon_favorites.png',//錯誤，圖片無法顯示
imgSrc: require('../../assets/images/icon_favorites.png'),//正確
}
}
}