這邊記錄手動安裝vuecli， 第三方套件要往上放，先安裝 Node.js。
使用 NVM 管理 Node.js
如果直接從官網下載 Node.js，只會安裝固定版本；NVM 可以用來安裝及切換不同版本。
- 下載：nvm-windows
- 點選
nvm-setup.zip - 開啟命令提示字元安裝 Node.js
nvm list
nvm list available
nvm install v8.12.0
nvm use v8.12.0
nvm list：查看已安裝的版本nvm list available：查看可以安裝的 Node.js 版本nvm install v8.12.0：安裝指定版本nvm use v8.12.0：切換到指定版本- LTS：穩定版本
安裝 Vue CLI
全域安裝一次：
npm i -g vue-cli
-g 代表全域安裝。
查看模板清單：
vue list
空資料夾可以選擇下列模板：
browserifybrowserify-simplepwawebpack：主要模板webpack-simple：基本架構
如果要使用 SCSS，設定過程要選擇 Yes。
vue init webpack 資料夾名稱
vue init webpack-simple 資料夾名稱
確認是否安裝完成：
vue -V
安裝 Sass 與 Bootstrap
npm install bootstrap node-sass sass-loader --save
npm install --save jquery
npm install popper.js
測試 SCSS：
<style lang="scss">
$color: #000;
body {
background-color: $color;
}
</style>
引入 Bootstrap：
@import '~bootstrap/scss/bootstrap';
如果要指定當時使用的 Bootstrap 4 版本：
npm install --save jquery popper.js
npm install bootstrap@4.0.0-beta.3
在 main.js 引入 Bootstrap 的 SCSS 與 JavaScript 模組：
import 'bootstrap/scss/bootstrap.scss';
import 'bootstrap';
axios 與 vue-axios
npm install --save axios vue-axios
在 main.js 引入：
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);
測試資料可使用 https://randomuser.me/api/：
created() {
const url = 'https://randomuser.me/api/';
this.axios.get(url).then((response) => {
console.log(response.data);
});
this.$http.get(url).then((response) => {
console.log(response.data);
});
}
相關連結參考：
設定 API 路徑
設定 config/dev.env.js 與 config/prod.env.js：
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
APIPATH: '"https://xxx.xxx.xxx/"',
CUSTOMPATH: '"adminUser"',
});
設定完成後要重啟 Vue CLI。在需要使用的頁面輸入：
const url = `${process.env.APIPATH}/admin/signin`;
Vue Router
如果沒有安裝 Vue Router：
npm i -s vue-router
main.js：
import router from './router';
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
});
router/index.js：
import Router from 'vue-router';
import login from '@/components/pages/login';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'xxx',
component: xxx,
},
],
});
元件使用 <router-view/> 顯示路由內容。
導航守衛
導航守衛用來驗證使用者是否需要登入，在路由加入 meta: { requiresAuth: true }。
檢查權限：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) {
const api = `${process.env.APIPATH}/api/user/check`;
axios.post(api).then((response) => {
if (response.data.success) {
next();
} else {
next({
path: '/login',
});
}
});
} else {
next();
}
});
當時的筆記是：頁面第一次無法觸發時，必須點選下一頁才會執行。
axios 可以直接使用；this.$http 要在 Vue 元件內使用。
vue-loading-overlay
npm install vue-loading-overlay --save
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.min.css';
Vue.component('Loading', Loading);
<template>
<div>
<loading
:active.sync="isLoading"
:can-cancel="true"
:on-cancel="onCancel"
:is-full-page="fullPage"
/>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: false,
};
},
};
</script>
Vee Validate
npm install vee-validate
在 main.js 引入：
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
姓名欄位判斷：
<input
type="text"
name="name"
:class="{ 'is-invalid': errors.has('name') }"
v-validate="'required'"
>
<span class="text-danger" v-if="errors.has('name')">姓名必須輸入</span>
v-validate="'required'" 代表必須輸入。欄位點選後沒有輸入，再移出欄位時會顯示錯誤。
Email 欄位判斷：
<input
type="text"
name="email"
v-model="form.user.email"
:class="{ 'is-invalid': errors.has('email') }"
v-validate="'required|email'"
>
<span class="text-danger" v-if="errors.has('email')">
{{ errors.first('email') }}
</span>
驗證語系
語系路徑：node_modules/vee-validate/dist/locale/。
import zhTWValidate from 'vee-validate/dist/locale/zh_TW';
VeeValidate.Validator.localize('zh_TW', zhTWValidate);
表單送出前驗證
this.$validator.validate().then((result) => {
if (result) {
this.$http.post(url, { data: order }).then((res) => {
console.log('訂單已建立', res);
});
} else {
console.log('未完成');
}
});
Vuex
先新增 store.js，再安裝 Vuex：
npm i -s vuex
main.js：
import Vuex, { Store } from 'vuex';
Vue.use(Vuex);
元件：
import store from './store.js';
import { mapState } from 'vuex';
SCSS 架構
app.scss 統一引入自訂樣式與 Bootstrap
_customBootstrap.scss 統一調整 Bootstrap 風格
app.scss：
@import 'variable';
@import 'mixin';
@import 'reset';
@import 'extend';
@import 'layout';
// third-party
@import 'customBootstrap';
@import '~bootstrap/scss/bootstrap';
程式進入點只要引入 Bootstrap 與 app.scss：
import 'bootstrap';
import './assets/css/app.scss';
參考：SCSS 架構。
Vue CLI 專案結構
main.js 程式進入點
router/index.js Router 設定檔
*.vue 分頁與元件
安裝完成後：
npm i
npm run dev
其他筆記
- 終止命令提示字元：
Ctrl+C或Ctrl+/ Shift+ 滑鼠右鍵：開啟命令視窗- 開啟 VS Code 終端機：
Ctrl+` - Webpack 的
resolve可以省略副檔名，路徑可以使用@/ - 圖片小於 10KB 會壓縮成 Base64，大於 10KB 則以圖檔顯示
index.js依執行環境設定，host可以替換成要運行的 IP