First, the project initialization
Creating webpack template project are as follows:
MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project name luffy_project ? Project description A Vue.js project ? Author hqs ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? No ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recommended) npm vue-cli · Generated "luffy_project".
Follow the prompts to start the project:
Luffy_project $ cd /
$ asl run dev
By choosing vue-router during initialization, automatically create /src/router/index.js file.
After deleting Helloworld components related to information, index.js file contents are as follows:
Vue from Import 'VUE' Import from Router 'VUE-Router' // @ absolute route search to the src ... / // If Router as a local module must Vue.use (Router) // later in the assembly can be . $ router instance obtained by this Router object // routing information object acquires this $ routes route configuration information. Vue.use (Router) // configure routing rules Export default new new Router ({ routes: [ {
'path': '/ '
} ] })
Second, a navigation bar based framework ElementUI
1, elementUI-- UI framework for the Vue
elementUI is a UI library, it does not depend on vue, but they are currently doing project development and vue with a better UI framework.
(1) npm install
Npm recommended way to install, better and webpack packaging tools used in conjunction.
$ Asl element and -S-ui
（2）CDN
Currently can unpkg.com/element-ui get the latest version of the resource, the introduction of js and css files on the page to get started.
<! - introducing Style -> <Link the rel = "this stylesheet" the href = "https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <! - component library is introduced - -> <Script the src = "https://unpkg.com/element-ui/lib/index.js"> </ Script>
Use CND introduced Element version to be locked on the link address, so as not to be affected by non-compatibility updates when Element upgrade in the future. Check the locked version of the method unpkg.com .
2, the introduction of Element
In the project can be introduced throughout the Element, or a portion of the assembly is introduced only as necessary.
(1) complete the introduction
Main.js written in the following:
Vue from Import 'VUE' Import from the App './App' Import from Router './router' // ElementUI introduced Import from ElementUI 'UI-Element' Import 'UI-Element / lib / Theme-Chalk / index.css' // Note style file requires a separate introduction // call widget Vue.use (ElementUI); Vue.config.productionTip = to false ; / * eslint-NO-disable new new * / new new Vue ({ EL: '#app' , Router, Components: the App {}, Template: '<the App />' });
The above code will complete the full introduction of the Element.
Try to use elementui of a Button in App.vue:
<template>
<div id="app">
<!-- 导航区域 -->
<el-button type="info">信息按钮</el-button>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
display effect:
(2) introducing demand
Means Babel-Component-plugin , the components need only be introduced in order to achieve the goal of reducing the volume of the item.
First install babel-plugin-component:
$ npm install babel-plugin-component -D
Then .babelrc file is modified as follows:
{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }
If you only want to introduce some components, such as how Buttion Select, then the need to write in main.js the following:
import Vue from 'vue'; import { Button, Select } from 'element-ui'; import App from './App.vue'; Vue.component(Button.name, Button); Vue.component(Select.name, Select); /* 或写为 * Vue.use(Button) * Vue.use(Select) */ new Vue({ el: '#app', render: h => h(App) });
3, the navigation bar to achieve
First create /src/components/Common/LuffyHeader.vue file:
<template>
<!-- element-ui -->
<el-container>
<el-header height = '80px' >
<div class="header">
<div class="nav-left">
<img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg" alt="">
</div>
<div class="nav-center">
<ul>
<li>
<a href="#">
导航链接
</a>
</li>
</ul>
</div>
<div class="nav-right">
<span>Login </ span>
</ div>
</ div><span> Register </ span>nbsp;
nbsp &; | &
</el-header>
</el-container>
</template>
<script>
export default {
name: 'LuffyHeader',
data(){
return {
}
},
};
</script>
Then create /static/global/global.css file:
* { Padding : 0 ; margin : 0 ; } body { font-size : 14px ; Color : # 4a4a4a ; font-Family : PingFangSC-Light ; / * Apple designed a new Chinese system font, which supports Apple adjusting the dynamic font technology * / } UL { List-style : none ; } A { text-Decoration : none ; }
Finally, the introduction and use of the components in App.vue:
<template>
<div id="app">
<!-- 导航区域 -->
<LuffyHeader/>
<router-view/>
</div>
</template>
<script>
import LuffyHeader from '@/components/Common/LuffyHeader'
export default {
name: 'App',
components:{
LuffyHeader
}
}
</script>
Display as follows:
Third, the navigation route Jump
1, component creation and routing configuration write
Add "Home", "free course", "light class", "degree course" four components, the following files are created:
src/components/Home/Home.vue src/components/Course/Course.vue src/components/LightCourse/LightCourse.vue src/components/Micro/Micro.vue
Introduction assembly src / router / index.js, configure routing rules:
Vue from Import 'VUE' Import from Router 'VUE-Router' // @ absolute route search to the src ... / // If Router as a local module must Vue.use (Router) // later in the assembly can be . $ router Router instances acquired object by the this // routing information object this. $ routes route configuration information acquired Import from Home '@ / Components / Home / Home' Import Course, from '@ / Components / Course, / Course,' Import from LightCourse '@ / Components / LightCourse / LightCourse' Import from Micro '@ / Components / Micro / Micro' Vue.use (Router) // configure routing rules Export default new new Router ({ routes: [ { path: '/', redirect: '/home' // 访问/，直接跳转到/home路径 }, { path: '/home', name: 'Home', component: Home }, { path: '/course', name: 'Course', component: Course }, { path: '/home/light-course', name: 'LightCourse', component: LightCourse }, { path: '/micro', name: 'Micro', component: Micro } ] })
2, preparation of navigation links
LuffyHeader.vue modify the page, write the navigation links:
<template>
<!-- element-ui -->
<el-container>
<el-header height = '80px' >
<div class="header">
<div class="nav-left">
<img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg" alt="">
</div>
<div class="nav-center">
<ul>
<li v-for="(list, index) in headerList" :key="list.id">
<a href="#">
{{ list.title }}
</a>
</li>
</ul>
</div>
<div class="nav-right">
<span>登录</span>
|
<span>注册</span>
</div>
</div>
</el-header>
</el-container>
</template>
<script>
export default {
name: 'LuffyHeader',
data() {
return {
headerList: [
{id: '1', name: 'Home', title: '首页'},
{id: '2', name: 'Course', title: '免费课程'},
{id: '3', name: 'LightCourse', title: '轻课'},
{id: '4',name: 'Micro', title: ' degree'
isShow:
],}false
}
}
}
</script>
Prepared headerList object list navigation list and acquires information corresponding to the object traversing the navigation bar, the page displayed in the following effects:
3, router-link route Jump
After writing the above, although the navigation bar may have been normal, but a label that does not do automatic jump. It requires the use of router-link rewritten further LuffyHeader.vue, so jump to render the corresponding components of routing:
<template>
<!-- element-ui -->
<el-container>
<el-header height = '80px' >
<div class="header">
<div class="nav-left">
<img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg" alt="">
</div>
<div class="nav-center">
<ul>
<li v-for="(list, index) in headerList" :key="list.id">
<router-link :to="{name:list.name}">
{{ list.title }}
</router-link>
</li>
</ul>
</div>
<div class="nav-right">
<span>登录</span>
|
<span>注册</span>
</div>
</div>
</el-header>
</el-container>
</template>
<script>
export default {
name: 'LuffyHeader',
data() {
return {
headerList: [
{id: '1', name: 'Home', title: '首页'},
{id: '2', name: 'Course', title: '免费课程'},
{id: '3', name: 'LightCourse', title: '轻课'},
{id: '4',name: 'Micro', title: ' degree'
isShow:
],}false
}
}
}
</script>
Used to = '{name: list.name}' route setting command, so that a click on the tab can jump. Display as follows:
Although you can see the light click on the class, but navigation items and other styles There is no difference, you need to set routing active style complete optimization.
4, linkActiveClass set route active style
linkActiveClass global configuration <router-link> of default "active class class name."
CSS class name used when the active-class settings link activation. The default value can be constructed by routing options of linkActiveClass configuration to globally.
(1) disposed in the routing linkActiveClass
Following configurations src / router / index.js of:
Vue from Import 'VUE' Import from Router 'VUE-Router' // @ absolute route search to the src ... / // If Router as a local module must Vue.use (Router) // later in the assembly can be . $ router Router instances acquired object by the this // routing information object this. $ routes route configuration information acquired Import from Home '@ / Components / Home / Home' Import Course, from '@ / Components / Course, / Course,' Import from LightCourse '@ / Components / LightCourse / LightCourse' Import from Micro '@ / Components / Micro / Micro' Vue.use (Router) // configure routing rules Export default new new Router ({ linkActiveClass : 'IS-Active' , routes: [ { Path: '/' , the redirect: '/ home' // access / jump directly to / home path }, ...... { path: '/ Micro' , name: 'Micro' , Component: Micro } ] })
(2) configure the routing pattern in LuffyHeader.vue active in
<template> ......省略 </template> <script> ......省略 </script> <style lang="css" scoped> .nav-center ul li a.is-active{ color: #4a4a4a; border-bottom: 4px solid #ffc210; } </style>
(3) display
5, hash mode is switched to the mode history
vue-router default hash mode - use the URL to simulate a complete hash of the URL, so when the URL changes, the page will not reload. For example http://www.abc.com/#/index, the hash value#/index . hash模式的特点That hash appears in the url, but will not be included in HTTP请求中, had no effect on the back end, it will not reload the page.
If you do not want to compare this ugly display of hash, you can use the route history mode , this mode take advantage of history.pushState API URL to complete the jump without having to reload the page.
(1) modify the route history mode
Modify src / router / index.js file as follows:
Vue from Import 'VUE' Import from Router 'VUE-Router' // @ absolute route search to the src ... / // If Router as a local module must Vue.use (Router) // later in the assembly can be . $ router Router instances acquired object by the this // routing information object this. $ routes route configuration information acquired Import from Home '@ / Components / Home / Home' Import Course, from '@ / Components / Course, / Course,' Import from LightCourse '@ / Components / LightCourse / LightCourse' Import from Micro '@ / Components / Micro / Micro' Vue.use (Router) // configure routing rules Export default new new Router ({ linkActiveClass: 'IS-Active' , mode: 'history' , // read mode history routes: [ { path: '/' , the redirect: '/ home' // access / jump directly to / home path }, ..... ] })
When using the history mode, url like normal url, e.g. http://yoursite.com/user/id, so more beautiful.
Display as follows:
(2) disposed rear end
But to better use this mode, you need to configure the background support. vue single-page application is a client application, if the background is not properly configured, the user will return to 404 in a browser to access http://yoursite.com/user/id, so bad.
Therefore, to increase the service side a candidate resources to cover all situations: if the URL match any static resources, you should return the same index.html page, which is dependent on the app page.
Example backend configuration: https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD% AE% E4% BE% 8B% E5% AD% 90