vue-admin 詳細註釋，必須手把手作項目系列之（一）
vue-admin-stepbystep
A Vue.js projectjavascript
系列文章
- [juejin.im/post/5c1609… ]vue-admin詳細註釋，必須手把手作項目系列之（二）
- [juejin.im/post/5c18db…]vue-admin 詳細註釋，必須手把手作項目系列之（三）丟到服務器中解決報錯
- 麻雀雖小五臟俱全：[項目地址 github.com/whylisa/vue…)
項目功能
- 1 登陸
- 2 首頁
- 3 退出
- 4 table頁
項目技術點
- 1，使用vue
- 2，使用echarts
- 3, 使用json-server (系列二寫詳細文檔)
- 4, 使用node起一個簡單的服務,服務於接口(系列二寫詳細文檔)
- 5, 使用axios
- 6, vue-router的使用規則(異步加載，和同步加載)
- 7, 回話攔截的使用（localstorage or cookie）
- 8, 配合element-UI
- 9, 修改組件裏面的樣式裏面的坑
- 10, 打包時的優化
- 11, DNS優化
- 12, 配置本地代理，使用接口(系列二寫詳細文檔)
- 13, 使用axios配合json-server 模擬增刪改查(系列二寫詳細文檔)
- 14, 使用nprogress 插件
- 15, 不爲人知的element-UI 的滾動條
- 16, 柵格佈局，大小屏適應配合媒體查詢
- 17, css使用less
- 18, 代碼風格，我的風格，禁用了jslint 防止不懂得小夥伴抓狂
- 19, 兼容性的處理(系列二寫詳細文檔)
項目搭建
- 1
vue init webpack XX使用vue-cli 2.0
Project name ：默認
Project description ：默認
Author ：默認
Vue build ：選擇 Runtime + Compiler
Install vue-router? ：Y
Use ESLint to lint your code? ：Y 選擇 Standard
Set up unit tests ：n
Setup e2e tests with Nightwatch? : n
Should we run `npm install` for you after the project has been created? (recommended) : Yes, use NPM
複製代碼
- 2 進入項目：cd vue-admin-stepbystep
- 3 運行項目：npm run dev
如何添加一個新的功能？？？
- 1 在
components中新建一個文件夾（login），在文件中建立組件(Login.vue) - 2 在
router/index.js中導入組件（login.vue） - 3 配置路由規則
在項目中使用 element-ui(其餘自行gg加深映像)
- ElementUI 文檔
- 安裝：
npm i element-ui -S
// main.js
// 導入elementui - js
import ElementUI from 'element-ui'
// 導入elementui - css
import 'element-ui/lib/theme-chalk/index.css'
// 安裝插件
Vue.use(ElementUI)
複製代碼
項目啓動作了什麼
- 1 在終端中運行：
npm run dev，實際上就是運行了：webpack-dev-server ... - 2 使用 webpack-dev-server 開啓一個服務器
- 3 根據指定的入口
src/main.js開始分析入口中使用到的模塊 - 4 當遇到
import的時候，webpack 就會加載這些模塊內容（若是有重複模塊，好比：Vue，實際上未來只會加載一次），遇到代碼就執行這些代碼 - 5 建立 Vue 實例，將 App 組件做爲模板進行編譯，而且將 App 組件中 template 的內容渲染在頁面 #app 的位置
路由配置
- 1 異步加載路由
- 2 使用進度條插件
- 3 登陸攔截 會話保持
import Vue from 'vue'
import Router from 'vue-router'
//引入nprogress進度條
import NProgress from 'nprogress'
//引入nprogress進度條的樣式
import 'nprogress/nprogress.css'
//在打包過程當中每個組件都會打包成一個js文件，若是不使用使用/* webpackChunkName: "home" */
//在打包的時候就會生成0.js,1.js等等，使用了以後就會打包成home.js
// 導入 Login 組件（注意，不要添加 .vue 後綴）
//這是路由的異步加載，！important,這是優化項目必須的
//引入home組件
const Home = () => import(/* webpackChunkName: "home" */ '@/components/home')
//引入登陸組件
const Login = () => import(/* webpackChunkName: "home" */ '@/components/login')
//引入table組件
const Table = () => import(/* webpackChunkName: "home" */ '@/components/table/table')
//引入homeMain組件
const HomeMain = () => import('@/components/HomeMain')
//這裏是同步加載
//import Login from '@/components/login/Login'
Vue.use(Router)
const router = new Router({
mode: 'history',//開啓了history模式，去除了#，
// 在vue中，通常來講經過實例去訪問某個屬性的
// vm.xxxx vm.$set vm.$refs vm.$router
routes: [
{
path: '/',
redirect: '/homeMain'//路由的重定向
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/home',
name: 'home',
component: Home,
// children 用來配置子路由，未來匹配的組件會展現在 Home 組件的 router-view 中
// 對於子路由path來講：
// 1 若是不是以 / 開頭，那麼，哈希值爲： 父級path + / + 子級path
// 也就是： /home/homeMain
// 2 若是子級路由的path是以 / 開頭的，那麼未來的哈希值爲：/users 再也不帶有父級的path了
// 也就是：/homeMain
//這是頁面中的子路由，在頁面中必須聲明router-view做爲出口
children: [
{
path: '/homeMain',
name: 'homeMain',
component: HomeMain
},
{
path: '/table',
name: 'table',
component:Table
}
]
}
]
});
// 給router配置導航守衛
// to: 去哪兒
// from: from 哪兒來
// next() : next()：放行 next('/login') 去login組件
// 在登陸成功之後，將 token 存儲到 localStorage 中
// 在 導航守衛 中先判斷當前訪問的頁面是否是登陸頁面
// 若是是登陸頁面，直接放行（next()）
// 若是不是登陸頁面，就從 localStorage 中獲取 token，判斷有沒有登陸
// 若是登陸了，直接放行（next()）
// 若是沒有登陸，就跳轉到登陸頁面讓用戶登陸（next('/login')
router.beforeEach((to, from, next) => {
// 開啓進度條
NProgress.start()
// 獲取是否有token
let token = localStorage.getItem('myToken')
// 若是已經就是要去login了，就不須要攔截了
if (to.path === '/login' || token) {
next()
}else {
next('/login')
}
});
router.afterEach(() => {
// 關閉進度條
NProgress.done()
})
export default router
複製代碼
登陸功能
- 1 安裝：
npm i -S axios - 2 在
Login.vue組件中導入 axios - 3 使用 axios 根據接口文檔來發送請求，完成登陸
- 4 登陸時設置token ,能夠用localStorage cookie等任君選擇
<div class="l-right">
<div class="l-l">
<!-- @tab-click="handleClick" -->
<el-tabs v-model="activeName">
<el-tab-pane label="用戶登陸" name="first">
<!-- el-form:自定義表單組件 -->
<!-- :model="form" 表單對象，用於收集收據 -->
<!-- label-width="80px"：label的寬度 -->
<!-- el-form-item：表單項 -->
<el-form ref="form" status-icon :rules="rules" :model="form" label-width="80px">
<el-form-item prop="username">
<el-input v-model="form.username" placeholder="請輸入用戶名" prefix-icon="iconfont icon-yonghuming"></el-input>
</el-form-item>
<el-form-item prop="password">
<!-- 未來咱們給組件註冊事件的時候，能夠會註冊不上 -->
<!--@keyup.enter點擊鍵盤的enter觸發事件-->
<!-- .native: 註冊事件，給組件的根元素註冊事件 -->
<el-input type="password" v-model="form.password" placeholder="請輸入密碼" @keyup.enter.native="login" prefix-icon="iconfont icon-mima"></el-input>
</el-form-item>
<el-form-item>
<!--使用@語法糖綁定事件-->
<el-button type="primary" @click="login">登陸</el-button>
<el-button @click="reset">重置</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="帥哥登陸" name="second">長得很帥</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
複製代碼
export default {
data () {
return {
// 定義一些變量,可使用{{}}語法在頁面中直接獲取
activeName: 'first',
form: {
username: 'why',
password: "123456"
},
rules: {
// 用戶名的校驗
username: [
// 用戶名是必須
// required是否必須
// message提示信息
// trigger如何觸發
{ required: true, message: '請輸入用戶名', trigger: 'change' },
{ min: 3, max: 6, message: '長度在 3 到 6 個字符', trigger: 'change' }
],
// 密碼的校驗
password: [
{ required: true, message: '請輸入密碼', trigger: 'change' },
{ min: 6, max: 12, message: '長度在 6 到 12 個字符', trigger: 'change' }
]
}
}
},
methods: {
login () {
// 先觸發頁面中的檢驗規則,不經過給提示,經過就向後臺發送請求,
// $refs是vue中獲取頁面的,在html中要寫 ref="form"
this.$refs.form.validate(async (valid) => {
if (valid) {
// 使用axios向後臺發送請求
// 在es6中的箭頭函數沒有this綁定，能夠打印出來指向的是vue實例，這點能夠自行百度，加深映像
this.axios('/api/login').then( res => {
console.log(res.data[0])//用來查看接口裏面的數據
let lg = res.data[0] //把數據賦值給變量
console.log(lg.username,lg.password)//主要用來查看數據
if(lg.username === this.form.username && lg.password==this.form.password){
localStorage.setItem('myToken',lg.username)//設置攔截，能夠用cookie等，在控制檯中的Application中查看
this.$message.success('恭喜你，登陸成功')//登陸成功的提示
this.$router.push('homeMain') //使用編程式導航路由進行跳轉
}else {
this.$message.error('帳號或者密碼錯誤')//帳號密碼錯誤時的提示
}
})
}
})
},
reset () {
this.$refs.form.resetFields()//清空輸入框中的信息
// 數據被我寫死了,能夠自行改動
}
}
};
複製代碼
頂部和側邊
<el-container>
<!--給el-header設置 高度-->
<el-header style="height: 70px;">
<div class="logo">
<!--這裏能夠放通常網站的logo-->
<!--<img src="../assets/main/logo.png" alt="">-->
</div>
<div class="header-right">
<div class="logout" @click="layout">
<!--javascript:;爲了防止a標籤的默認行爲，-->
<a href="javascript:;">退出</a>
</div>
<div class="people">
<!--映入iconfont 的字體圖標-->
<i class="iconfont icon-lianxirenwode"></i>
張三
</div>
<div class="call">
<i class="iconfont icon-lianxiwomen"></i>
聯繫咱們
</div>
</div>
</el-header>
<el-container>
<el-aside width="160px" background-color="#26292E">
<el-scrollbar style="height: 100%;">
<!-- el-menu: 導航菜單的組件 -->
<!-- default-active：默認高亮的菜單 -->
<!-- open close 展開和關閉的事件 -->
<!-- el-submenu: 子菜單 -->
<!-- el-menu-item-group: 子菜單中分組 -->
<!-- el-menu-item：子菜單中的每一項 -->
<!-- unique-opened: 保證只能打開一個子菜單 -->
<!-- router: 若是router爲true，那麼index就會做爲路由的鏈接 -->
<el-menu :unique-opened='true' :router="true" text-color="#ffffff" active-text-color="#cccccc">
<el-submenu index="1">
<template slot="title"><i class="iconfont icon-shouye"></i>
<span @click="gomain">
首頁
</span>
</template>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="iconfont icon-message-channel"></i>table</template>
<el-menu-item-group>
<el-menu-item index="/table">table</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-scrollbar>
</el-aside>
<el-container>
<!--使用element的自帶的滾動條，官方文檔沒有-->
<el-scrollbar style="height: 100%;width: 100%;">
<el-main>
<keep-alive>
<!-- 這裏是會被緩存的視圖組件 -->
<!-- $route.meta.keepAlive：若是是true， 說明是緩存組件，經過keep-alive這個標籤把緩存組件顯示出來 -->
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<!-- 這裏是不被緩存的視圖組件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>
</el-main>
</el-scrollbar>
</el-container>
</el-container>
</el-container>
複製代碼
export default {
created() {
},
data() {
return {
}
},
methods: {
gomain() {
//編程式導航
this.$router.push('/homeMain')
},
//退出功能
layout() {
// 退出功能要移除localStorage中的myToken
localStorage.removeItem('myToken')
// 跳轉到首頁
this.$router.push('login')
// 退出成功提示
this.$message.success('退出成功了')
},
},
}
複製代碼
首頁
- 代碼有點多截取一點，主要對echarts作了修改,x軸箭頭呀，修改柱狀圖的樣式呀等，還有element的柵格佈局配合媒體查詢
xAxis: {
data: ["三月", "四月", "五月", "六月", "七月"],
axisLine: {
symbol: ['none', 'arrow'],
lineStyle: {
color: 'rgba(212,212,212,1)', // x座標軸的軸線顏色
width: 1 //這裏是座標軸的寬度,爲0就是不顯示
}
}
},
yAxis: [{
type: 'value',
axisLabel: {
show: false //這行代碼控制着座標軸x軸的文字是否顯示
},
splitLine: {
show: false, // 網格線是否顯示
// 改變樣式
lineStyle: {
color: '#EDEDED' // 修改網格線顏色
}
},
axisLine: {
lineStyle: {
color: '#fff', // x座標軸的軸線顏色
width: 0 //這裏是座標軸的寬度,爲0就是不顯示
}
}
}],
複製代碼
表格的使用
<div class="table">
<div class="t-top">
<!--使用el-input 要注意，他默認佔父級100%的寬度-->
<el-input v-model="query" placeholder="請輸入內容"></el-input>
<!--el-button 綁定點擊事件向後臺發送數據查詢-->
<!--在此處一般會涉及到模糊查詢，此時咱們還須要綁定keyup事件，向後臺請求數據，而後渲染一個小的下拉框，咱們須要作的是發送查詢的字段給後臺， 後臺使用sql語句模糊查詢，咱們渲染就能夠-->
<el-button type="primary" @click="search">查詢</el-button>
</div>
<div class="t-bottom">
<!-- el-table:表格組件 -->
<!-- :data='tableData' 表格顯示的數據 -->
<!-- el-table-column：表格的一列 -->
<!-- prop： 當前列要顯示的數據 ，tableData內的數據-->
<!-- label：表頭 -->
<!-- width: 這一列的寬度 -->
<!--min-width：用來設置百分比-->
<!--:header-cell-style="{background:'red'}"-->
<!--align="center"表格內的數據居中-->
<el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'red'}" >
<el-table-column prop="date" label="日期" align="center" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" align="center" width="180">
</el-table-column>
<!--若是不設置百分比，就自動分配剩餘的寬度-->
<el-table-column prop="address" align="center" label="地址">
</el-table-column>
</el-table>
</div>
</div>
複製代碼
export default {
data() {
return {
// 綁定的input 查詢關鍵字
query: '',
// 須要一個數組用來存放table的數據
// 這是element組件裏面的,
tableData: []
}
},
mounted() {
// 在vue的生命週期的mounted中調用渲染列表
this.initTable()
},
methods:{
initTable() {
this.axios('/api/table').then( res => {
console.log(res.data)//查看接口返回時什麼樣的數據，要經常使用
this.tableData = res.data //接口返回的是一個數組，直接能夠賦值給table
})
},
search() {
}
}
}
複製代碼
改element-ui的樣式注意！
<!--使用scoped須要注意，使用的它以後，你就沒法更改elelment組件中的樣式-->
<style lang="less" scoped="scoped"> /*若是不想使用scoped,你就用父級的class把樣式所有包裹起來，就不會相互影響頁面的樣式了*/ 複製代碼
如下是一些概念性的東西，其餘的功能系列二將會陸續完善
編程式導航
- 就是經過 JS 代碼來實現路由的跳轉功能
// 注意：是 router 不是 route
// router用來實現路由跳轉，route用來獲取路由參數
// push 方法的參數爲：要跳轉到的路由地址（path）
this.$router.push('/home')
複製代碼
密碼
- 給輸入框組件添加 type="password" 就變爲密碼框狀態了
<el-input type="password" v-model="loginForm.password"></el-input>
複製代碼
登陸攔截
- 說明：在沒有登陸的狀況不該該讓用戶來訪問除登陸之外的任何頁面
登陸和攔截的整個流程說明
- 1 在登陸成功之後，將 token 存儲到 localStorage 中
- 2 在 導航守衛 中先判斷當前訪問的頁面是否是登陸頁面
- 3 若是是登陸頁面，直接放行（next()）
- 4 若是不是登陸頁面，就從 localStorage 中獲取 token，判斷有沒有登陸
- 5 若是登陸了，直接放行（next()）
- 6 若是沒有登陸，就跳轉到登陸頁面讓用戶登陸（next('/login')）
token 機制的說明
- 在項目中，若是登陸成功了，那麼，服務器會給咱們返回一個 token
- 這個 token 就是登陸成功的標識
- 這個 token 就至關於使用 cookie+session 機制中的 sessionid
公司人員和項目開發流程
- 1 產品經理定製項目的需求
- 2 分配任務：先將全部的任務分配到項目組，而後，再由項目組具體分配給每一個開發人員
- 3 開發：拿到 產品原型 + 需求文檔 + UI 設計稿 資料，轉化爲 HTML 頁面，完成功能
- 4 功能完成後，本身測試有沒有 Bug
- 5 由測試人員來測試你的功能，當測試出 Bug 後，就會經過 禪道 這樣的項目管理系統，來提出 Bug
- 6 由 本身 修改 測試人員提出來的 bug
- 7 最終，沒有 bug 了，項目纔會上線
產品經理（Product Manager）
提需求
產出： 產品原型 + 需求文檔
原型設計軟件：Axure 、墨刀
UI（設計）
將 產品經理 給的 原型圖 設計爲 好看的UI稿
FE（前端）front-end
產品原型 + 需求文檔 + UI設計稿 ===> HTML頁面
BE（後端） back-end
給前端提供數據接口
測試人員
產品原型 + 需求文檔 + UI設計稿 來測試咱們寫的功能
發現你的功能 與 需求 不一致，那就說明除Bug了，那麼，測試人員就會提Bug
Bug系統： 禪道
項目經理（管理技術）
技術攻堅，與其餘項目組人員溝通，分配任務 等
複製代碼
vue 單文件組件中的 scoped
- 做用：給
style標籤添加scoped屬性之後，樣式只會對當前組件中的結構生效，而不會影響到其餘組件
vue 單文件組件中的 lang
- 做用：添加
lang="less"後，就可使用 less 語法了 - 可是須要本身安裝：
npm i -D less less-loader
VSCode 中使用 Vetur 插件格式化單文件組件的 template
- 打開設置，配置：
"vetur.format.defaultFormatter.html": "js-beautify-html"
接口調用的說明
- 注意：全部接口都須要傳遞 token，只有傳遞了正確的 token，服務器纔會將數據返回給前端
- 若是沒有傳遞
token，服務器會返回401，告訴接口調用者，沒有權限來訪問這個接口
cookie+session VS token
Git 使用
# 克隆倉庫
git clone [倉庫地址]
# 推送
git push [倉庫地址] master
# 簡化推送地址
git remote add XX [倉庫地址]
git push -u XX master
# 第一次執行上面兩條命令，之後只須要輸入如下命令便可
git push XX
# 拉取
git pull [倉庫地址] master
git pull XX master
複製代碼
路由參數分頁
- 1 配置分頁路由參數, 參數是可選的
- 參數可選後, 路由就可以匹配:
/XX或者/XX/3
- 參數可選後, 路由就可以匹配:
- 2 使用路由來分頁, 有兩種狀況須要處理:
- 3 第一種: 進入頁面,就要根據當前路由參數中的頁碼,來獲取到對應頁的數據
- 4 第二種: 點擊分頁組件獲取數據, 須要作兩件事:
- 4.1 獲取到當前頁的數據( 調用獲取數據的方法 )
- 4.2 修改哈希值爲當前頁碼 ( this.$router.push() )
- 5 點擊分頁按鈕獲取數據的第二種思路:
- 5.1 點擊分頁按鈕, 觸發了分組件的 pageChange 事件
- 5.2 在 pageChange 事件中修改了路由( this.$router.push() )
- 5.3 路由發生改變後, watch 中的 $route 監視到了路由的改變
- 5.4 在
$route(to) {}方法中, 經過參數 to 獲取到當前頁碼, 從新調用獲取數據的方法來獲取當前頁的數據
項目打包和優化
- 打包命令：
npm run build
按需加載
- 1 修改
router/index.js中導入組件的語法
// 使用：
const Home = () => import('@/components/home/Home')
// 替換：
// import Home from '@/components/home/Home'
// 給打包生產的JS文件起名字
const Home = () => import(/* webpackChunkName: 'home' */ '@/components/home/Home')
// chunkName相同，將 goods 和 goods-add 兩個組件，打包到一塊兒
const XX = () => import(/* webpackChunkName: 'XX' */'@/components/XX')
const XXX = () => import(/* webpackChunkName: 'XX' */'@/components/XXX')
複製代碼
- 2 （該步可省略）修改
/build/webpack.prod.conf.js中的chunkFilename
{
// [name] 代替 [id]
chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
}
複製代碼
使用CDN
-
1 在
index.html中引入CDN提供的JS文件html -
2 在
/build/webpack.base.conf.js中（resolve前面）添加配置 externals前端 -
注意：經過CDN引入 element-ui 的樣式文件後，就不須要在 main.js 中導入 element-ui 的CSS文件了。因此，直接註釋掉 main.js 中的導入 element-ui 樣式便可vue
-
externals配置：java
externals: {
// 鍵：表示 導入包語法 from 後面跟着的名稱
// 值：表示 script 引入JS文件時，在全局環境中的變量名稱
vue: 'Vue',
axios: 'axios',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
moment: 'moment',
echarts: 'echarts',
}
import ElementUI from 'element-ui'
複製代碼
經常使用包CDN
-
vuenode
-
vue-routerwebpack
-
axiosios
-
說明：
- 1 先在官方文檔查找提供的CDN
- 2 若是沒有，在
https://www.bootcdn.cn/或其餘 CDN提供商 查找
<!-- Include the Quill library -->
<script src="https://cdn.bootcss.com/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Quill JS Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
<!-- Include stylesheet -->
<link href="https://cdn.bootcss.com/quill/1.3.4/quill.core.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/quill/1.3.4/quill.snow.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/quill/1.3.4/quill.bubble.min.css" rel="stylesheet">
複製代碼
移除console
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings: false,
drop_debugger: true,
drop_console: true
}
})
複製代碼
緩存和保留組件狀態
- keep-alive
- 解決方式：使用
keep-alive，步驟以下：
1 在須要被緩存組件的路由中添加 meta 屬性
meta 屬性用來給路由添加一些元信息（其實，就是一些附加信息）
{
path: '/',
name: 'home',
component: Home,
// 須要被緩存
meta: {
keepAlive: true
}
}
2 修改路由出口，替換爲如下形式：
根據 meta 是否有 keepAlive 屬性，決定該路由是否被緩存
<keep-alive>
<!-- 這裏是會被緩存的視圖組件 -->
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<!-- 這裏是不被緩存的視圖組件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>
複製代碼
啓用路由的 History 模式
- 經過在路由中添加
mode: 'history'能夠去掉 瀏覽器地址欄中的 # - 在開發期間，只須要添加這個配置便可
- 可是，在項目打包之後，就會出現問題
// 去掉 # 後，地址變爲：
http://localhost:1111/home
那麼，服務器須要正確處理 /goods 才能正確的響應內容，
可是，/home 不是服務端的接口，而是 用來在瀏覽器中實現 VueRouter 路由功能的
複製代碼
後端的處理方式
- 1 優先處理靜態資源
- 2 對於非靜態資源的請求，所有統一處理返回 index.html
- 3 當瀏覽器打開 index.html 就會加載 路由的js 文件，那麼路由就會解析 URL 中的 /login 這種去掉#的路徑了
待續中
[項目地址 github.com/whylisa/vue…)
相關文章
- 1. vue-admin 詳細註釋，必須手把手作項目系列之（二）
- 2. vue-admin 詳細註釋，必須手把手作項目系列之（三）丟到服務器中解決報錯
- 3. 手把手教學系列 之 PhotoShop安裝篇（極其詳細）
- 4. [手把手系列之] Jenkins+Docker自動化部署vue項目
- 5. [手把手系列之]docker 部署node+mongodb項目
- 6. [手把手系列之]Docker 部署 vue 項目
- 7. React Native_手把手教你作項目(一.項目搭建)
- 8. Jenkins持續集成GitHub項目（手把手超詳細配置）
- 9. 手把手操作系統之 int10
- 10. 手把手教你如何建立vue腳手架項目（最詳細！）
- 更多相關文章...
- • R 註釋 - R 語言教程
- • Rust 註釋 - RUST 教程
- • RxJava操作符（一）Creating Observables
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. vue-admin 詳細註釋，必須手把手作項目系列之（二）
- 2. vue-admin 詳細註釋，必須手把手作項目系列之（三）丟到服務器中解決報錯
- 3. 手把手教學系列 之 PhotoShop安裝篇（極其詳細）
- 4. [手把手系列之] Jenkins+Docker自動化部署vue項目
- 5. [手把手系列之]docker 部署node+mongodb項目
- 6. [手把手系列之]Docker 部署 vue 項目
- 7. React Native_手把手教你作項目(一.項目搭建)
- 8. Jenkins持續集成GitHub項目（手把手超詳細配置）
- 9. 手把手操作系統之 int10
- 10. 手把手教你如何建立vue腳手架項目（最詳細！）