VUE生命周期
mouted
created
VUE路由嵌套
前端路由,由浏览器负责跳转
如果需要进行路由的嵌套,需要采用children,子级的路由会在当前的路由占位符中进行展现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路由嵌套案例</title>
</head>
<body>
<div id="app">
<router-link to="/user">用户</router-link>
<router-link to="/dog">狗子</router-link>
<router-view></router-view>
</div>
<template id="userTem">
<div>
<h1>定义用户组件</h1>
</div>
</template>
<template id="dogTem">
<div>
<h1>定义狗子组件</h1>
<router-link to = "/smy">萨摩耶</router-link>
<router-link to = "/za">藏獒</router-link>
<!-- 定义路由占位符 -->
<router-view></router-view>
</div>
</template>
<template id="smyTem">
<div>
<h3>微笑天使</h3>
</div>
</template>
<template id="zaTem">
<div>
<h3>凶悍狗子</h3>
</div>
</template>
<!-- 1.先导入VUE的JS文件 -->
<script src="../js/vue.js"></script>
<!-- 2.再导入路由的JS文件 -->
<script src="../js/vue-router.js"></script>
<!-- 3.创建VUE对象 -->
<script>
let userCom={
template:"#userTem"
}
let dogCom={
template:"#dogTem"
}
let smyCom ={
template:"#smyTem"
}
let zaCom ={
template:"#zaTem"
}
/**
* 如果需要进行路由的嵌套,需要采用children,子级的路由会在当前的路由占位符中进行展现
*/
let router = new VueRouter({
routes:[
{path:"/user",component:userCom},
{path:"/dog",component:dogCom,children:[
{path:"/smy",component:smyCom},
{path:"/za",component:zaCom}
]}
]
})
const App = new Vue({
el:"#app",
router:router
})
</script>
</body>
</html>
安装VUE脚手架
参考https://blog.csdn.net/qq_16804847/article/details/112911057?spm=1001.2014.3001.5501
倒入plugin的时候import on demand
less-loader辅助编译CSS
脚手架
原来写前端代码时,需要自己手动维护html/css//js,并且如果文件很多,缺乏一种统一的方式进行管理。
可以像后端代码一样Controller/Service/Mapper 将代码进行分层管理,前端仿照后端
- assets 引入第三方JS/CSS
- components 组件
- plugins 引入第三方插件
- router代表路由机制
- App.vue 类似于index.html
- main.js 脚手架核心js
正确理解.vue文件
- 组件 HTML、CSS、JS都可以封装到组件中
- 在脚手架中 xxx.vue 代表一个组件
- template 里面编辑html片段
- script 里面编辑核心JS文件
- style里面编辑页面样式
<template>
<div id="app">
<!-- 添加路由占位符-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "app"
}
</script>
<style>
</style>
正确理解main.js文件
/**
* 引入组件/插件/JS
*/
import Vue from 'vue' //导入vue依赖 并且命名为Vue
import App from './App.vue'
import router from './router'//导入路由
import './plugins/element.js'
import './assets/css/global.css'
import './assets/ali-icon/iconfont.css'
/* 导入富文本编辑器 */
import VueQuillEditor from 'vue-quill-editor'
/* 导入富文本编辑器对应的样式 */
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
/**
* 环境设定
*/
/* 导入axios包 */
import axios from 'axios'
/* 设定axios的请求根目录,设定服务器请求网址 */
axios.defaults.baseURL = 'http://localhost:8091/'
/*
只在main.js中引入了axios,要在其他组件中也使用,方便其他JS调用Axios,必须向vue对象中添加全局对象,将变量定义为全局变量
Vue.prototype 定义全局变量 $http
以后发送ajax请求使用$http对象
比使用一次加载一次要方便很多,脚手架的手势之一
*/
Vue.prototype.$http = axios
Vue.config.productionTip = false
/* 定义过滤器 */
Vue.filter("priceFormat",function(price){
return (price / 100).toFixed(2)
})
/* 将富文本编辑器注册为全局可用的组件 */
Vue.use(VueQuillEditor)
/**
* 初始化vue对象
*/
new Vue({
//引入路由机制
router,//如果key和value相同时,可以只写key
render: h => h(App) // 找到具体文件
}).$mount('#app') //找到具体的div
/**
* import App from './App.vue'引入组件
* 定义默认div
* 找到指定的xxx.vue,找到指定的div进行渲染
*/
/#/ # 号为了表示这是前端路由
总结
main.js作用:
- 导入整个项目所用到的js
- 实例化VUE对象
- 通过实例化的VUE对象渲染程序.