【Vue】Vue 常用套件環境設定

  • vue-loader
  • bootstrap / jQuery
  • axios

版本:vue-cli 2.9.3

Vue-router

安裝 Vue-router

$ npm install vue-router

在專案下使用 npm 安裝,如果你是使用 webpack 樣板,你在設定pakage.json就可以選擇要不要安裝。

註冊

import router from './router';

new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
});

main.js裡面會發現他已經幫你 import 進去,接著看app.vue,會發現有個<router-view/>的標籤,這意思是路由顯示的畫面會在那個區塊做顯示,接著看router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);
// init

// page import
import Hello from './pages/Hello.vue';
import Hello2 from './pages/Hello2.vue';

const router = new VueRouter({
mode: 'history',
base: __dirname,
// router 列表
routes: [
{
path: '/hello',
name: 'hello',
component: Hello,
},
{
path: '/hello2',
name: 'hello2',
component: Hello2,
},
// router 轉址
{ path: '/*', redirect: '/hello' },
],
});

如果使用webpack-simple模板,需要按照官方的方式 import,也不會有router資料夾,必須直接在裡面設置 router。

import HelloWorld from '@/components/HelloWorld';

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
},
],
});

這段的意思是說,是 router 根據用戶的 url 來判斷要顯示哪個元件,所有要依據路由轉換的元件都要在router/index.js上註冊。

<router-link :to="page01url">page01</router-link> <router-link :to="page02url">page02</router-link>

在選用觸發切換路由,絕大部分人都會直接反應用 a 連結下去切換,但官方並不建議這樣寫,官方建議用<router-link>

bootstrap

安裝 bootstrap

$ npm install bootstrap sass-loader postcss-loader node-sass --save

上面指令是官方建議的安裝方法,但如果要引用 bootstrap 的 sass 仍然會報錯,因為 webpack 無法解析,所以要安裝sass-loaderpost-loader,以及讓sass-loader相依的node-sass,讓 bootstrap 可以正常解析。

$ npm install -D vue-style-loader css-loader

但是為了在預覽 vue 的時候可以即時顯示,所以我們必須還要再下載vue-style-loader,這和之前用的style-loader有 87 分像。

{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'post-loader',
'sass-loader',
]
}
}
}

因為 webpack loader 的運作機制順序是由後往前、內往外,因此在webpack.base.config.js的配置如上,這讓 bootstrap 的 sass 有全局的設定。

$ npm install sass-resources-loader

此時發現,只要在子元件想要使用 bootstrap sass 的程式庫 (mixin、extend……)及變數,並無法正確載入,為了不要在子元件裡面一直重複 import ,這時候需要加載sass-resources-loader

{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, './src/assets/styles/global.scss'),
},
}
]
}
}
}

這個 loader 主要是讓 sass 在被編譯解析前,把我們要設為全域環境的 sass 檔案路徑放到resources中。

@import '~bootstrap/scss/bootstrap';

再到./src/assets/styles/global.scss的檔案裡面匯入 bootstrap 。

import './assets/styles/global.scss';

最後別忘了要再app.vue的檔案中 import 才算完成。
此外在global.scss中,你也可以放置你想要設為全域的 sass ,例如 RWD 斷點、變數之類的,因為這個 sass 是全域,所以也要考慮專案的加載量。

jQuery

$ npm install --save jquery popper.js

處理完 sass 的部分,接下來處理互動。為了能正常使用 bootstrap 元件的部分,因此要再多下載 jQuery 和 popper.js,popper.js 的副檔名一定要加,不然 popper 是另外一個套件。

const webpack = require('webpack')
...
plugins: [
new webpack.ProvidePlugin({
'$': "jquery",
'jQuery': "jquery",
'Popper': 'popper.js'
})
],

webpack.base.config.js的設定。

axios

介紹

Promise based HTTP client for the browser and node.js

基於 promise 用於 瀏覽器和 node.js 的 HTTP 客戶端。

特色

  • 在瀏覽器創建 XMLHttpRequest
  • 從 node.js 發出 http 請求
  • 支援 Promise API
  • 攔截請求跟回應
  • 轉換請求與回應資料
  • 取消請求
  • 自動轉換 JSON 資料
  • 客戶端防止 CSRF/XSRF

$ npm install axios

一樣使用 npm 安裝。

import Axios from 'Axios';
...
...
Vue.prototype.$axios = Axios;
// 為了讓其他元件也能使用 axios,需改成 vue 的原型屬性。

安裝完之後,把他 import 進main.js

post 範例執行方法

created(){
this.$axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}

這個方法是在元件被創造完後,立即調用,利用 axios 執行 post 請求,要看更多方法請看axios github,生命週期的部分,詳細可以看Vue 生命週期

【JS30】Day23:Speech Synthesis 【JS30】Day22:Follow Along Link Highlighter

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×