标签:lse 文件 导航栏 modules rect nts set 挂载点 redirect
├── v-proj
| ├── node_modules // 当前项目所有依赖,一般不可以移植给其他电脑环境
| ├── public
| | ├── favicon.ico // 标签图标
| | └── index.html // 当前项目唯一的页面
| ├── src
| | ├── assets // 静态资源img、css、js
| | ├── components // 小组件
| | ├── views // 页面组件
| | ├── App.vue // 根组件
| | ├── main.js // 全局脚本文件(项目的入口)
| | ├── router
| | | └── index.js// 路由脚本文件(配置路由 url链接 与 页面组件的映射关系)
| | └── store
| | | └── index.js// 仓库脚本文件(vuex插件的配置文件,数据仓库)
| ├── README.md
└ └── package.json等配置文件
1、创建项目:vue create 项目名 - babel、vue-router、vuex
注意:上传项目的时候把node_modules文件夹删除
2、项目目录:
node_modules依赖(不同电脑依赖需要重新构建)
views:页面组件
components:小组件
router/index.js:路由配置文件 - 路径与页面组件对应关系
App.vue:根组件,固定五行话(看代码)
main.js:项目总脚本文件 - 配置所有环境,加载根组件
3、vue请求生命周期:
浏览器请求/user => router插件映射User.vue组件 => User.vue组件替换App.vue中的<router-view />占位符
注: i) 可以用 <router-link to="/user">用户页</router-link>完成标签跳转
ii) this.$router.push('/user')完成逻辑跳转
4、vue组件的生命周期钩子:组件 创建 到 销毁 中的时间节点回调的方法
created(){} | mounted(){}
5、路由跳转
this.$router.push({name: '路由名', query: {拼接的参数}})
this.$router.go(number)
6、路由配置
{
path: '/course/detail',
name: 'course-detail',
component: CourseDetail
}
{
path: '/detail',
redirect: '/course/detail'
}
this.$router.push('/course/detail'); == this.$router.push('/detail');
this.$router.push('/course/detail?pk=1'); => this.$route.query.pk
?```````````````````````````````````````````````````````````````````````
{
path: '/course/detail/:pk',
name: 'course-detail',
component: CourseDetail
}
this.$router.push('/course/detail/10'); => this.$route.params.pk
7、js类的原型:类属性
8、配置全局css样式
import '@/assets/css/global.css'
require('@/assets/css/global.css');
路由知识点概况:
1)路由配置:router/index.js
2)路由跳转与路由渲染:router-link、router-view、$router.push、$router.go
3)路由传参:两种传参
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
//所有的导入只能导入那些已导出的文件
import Vue from 'vue' // 加载vue环境
import App from './App.vue' // 加载根组件
import router from './router' // 加载路由环境
import store from './store' // 加载数据仓库环境
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: function (readFn) { //组件替换文件用render渲染
return readFn(App); //将读的二进制流返回出去替换挂载点
},
});
1.启动项目,加载主脚本文件 main.js
2.router被加载,就会解析router文件夹下的index.js脚本文件,完成路由-组件的映射关系
3.新建视图组件.vue(在views文件夹中),在路由中配置(在router的index.js中),设置路由跳转(在导航栏组件Nav.vue)
template标签负责组件的html结构:有且只有一个根标签
script标签负责组件的js逻辑:逻辑固定导出 export default {组件内容}
style标签负责组件的CSS样式:scoped保证样式的组件化-样式只在该组件内部起作用
标签:lse 文件 导航栏 modules rect nts set 挂载点 redirect
原文地址:https://www.cnblogs.com/lidandanaa/p/12070597.html