vue项目访问顺序
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);}.
