2021-08-03

最新推荐文章于 2021-11-10 17:26:45 发布

jiawensmile365

最新推荐文章于 2021-11-10 17:26:45 发布

阅读量33

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/qq_42312639/article/details/119342969

版权

文章目录

VUE生命周期
VUE路由嵌套
安装VUE脚手架

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对象渲染程序.

jiawensmile365

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-03

文章目录VUE生命周期VUE路由嵌套安装VUE脚手架脚手架正确理解.vue文件正确理解main.js文件总结VUE生命周期moutedcreatedVUE路由嵌套前端路由，由浏览器负责跳转如果需要进行路由的嵌套，需要采用children，子级的路由会在当前的路由占位符中进行展现<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>路由嵌套案例</ti
复制链接

扫一扫