1.vue項目訪問順序
訪問index.html后，main.js會將app.vue組件顯示,會再通過進入router里的index.js從而進入hello.vue組件.進而展現整個頁面。
2.mian.js(項目開始展示內容)
import Vue from 'vue'
import App from './App' //App.vue
import router from './router'//前3個導入自帶的vue
import MuseUI from 'muse-ui'
import 'common/style/muse-ui.css'
import fastclick from 'fastclick'//導入第三方封裝好的vue
fastclick.attach(document.body)
Vue.use(MuseUI)
Vue.use(materialicons)//使用第三方封裝好的vue
//app這個vue的實例會接管app這個
// dom里面的內容,會分析<div id="app"> </div>這個dom里面所有的內容,並顯示出來
new Vue({
el: '#app', //創建的vue實例負責處理的區域
router, //路由處理vue頁面的跳轉，相當於路徑導航
render: h => h(App)
})
template:‘<app/>’,components:{App}配合使用與單獨使用render:h=>h(App)會達到同樣的效果
前者識別<template>標簽，后者直接解析template下的id為app的div(忽略template的存在)
3.App.vue
<template>
<div id="app"> // vue實例渲染出的內容掛載的目標
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
}
}
}
</script>
<style lang="less">
</style>
4.index.js(項目開始展示內容)
import Vue from 'vue'
import Router from 'vue-router'//導入內部vue文件
import Auth from '@/views/Auth'
import FuelFill from '@/views/FuelFill'//導入自定義vue文件，@代表src目錄
Vue.use(Router)//vue使用Router路由
export default new Router({
routes: [
{
path: '/', //打開瀏覽器的第一個頁面的路徑，根路徑
redirect: '/auth'//將根路徑重定向到/auth路徑下
},
{
path: '/auth',
name: 'Auth',
component: Auth //路徑/auth的頁面加載Auth組件，這里路徑是指瀏覽器地址路徑
},
{
path: '/fuelfill',
name: 'FuelFill',
component: FuelFill //路徑/FuelFill的頁面加載Auth組件，這里路徑是指瀏覽器地址路徑
}
]
})
//例如：http://localhost:8080/#/auth 這個界面就是Auth組件布局的
http://localhost:8080/#/fuelfill 這個界面就是fuelfill組件布局
5.Auth.vue
//vue組件有3部分組成
// 1.模板：布局頁面框架（html）
<template>
<div>
<mu-container>
<mu-dialog width="85%" :open.sync="openSimple" :overlay-close="false">
<span style="text-align: center">
<img class="authImg" :src="titleImg"/>
<p class="authTitle">授權</p>
<p class="authSubTitle1">已為您綁定手機號：</p>
<p class="authSubTitle2">未綁定手機號</p>
</span>
<mu-button slot="actions" :flat="false" color="#43b79c" l @click="fuelFilling">我知道了</mu-button>
</mu-dialog>
</mu-container>
</div>
</template>
<script>
export default {
data() {
return {
openSimple: true,
titleImg: require('common/image/cnpc.png')
}
},
methods: {
fuelFilling: function () {
this.$router.push({path: '/fuelfill'})
}
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
.authImg
width: 5em
height: 5em
.authTitle
font-size: 1.2em
color: white
margin-top: 2em
.authSubTitle1
font-size: 1.0em
color: white
margin-top: 2em
.authSubTitle2
font-size: 1.0em
color: #878787
margin-top: 1em
</style>
6.配置文件webpack.base.conf.js
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),//相當於替換
'src': resolve('src'),//相當於替換
'common': resolve('src/common'),//相當於替換
'components': resolve('src/components')//相當於替換
}
},
在文件中
render:h=>h(App)是ES6中的箭頭函數寫法，等價於render:function(h){return h(App);}.