Vue 项目目录结构分析
Vue项目目录结构分析
├── v-proj | ├── node_modules // 当前项目所有依赖，一般不可以移植给其他电脑环境 | ├── public | | ├── favicon.ico // 标签图标 | | └── index.html // 当前项目唯一的页面 | ├── src | | ├── assets // 静态资源img、css、js | | ├── components // 小组件 | | ├── views // 页面(视图)组件 | | ├── App.vue // 根组件 | | ├── main.js // 全局脚本文件（项目的入口） | | ├── router.js // 路由脚本文件（配置路由 url链接 与 页面组件的映射关系） | | └── store.js // 仓库脚本文件（vuex插件的配置文件，数据仓库） | ├── README.md └ └── **配置文件
Vue组件(.vue文件)
// template : 有且只能有一个跟标签 // script : 必须将组件对象导出 export default { } // style : style标签明确scoped属性,代表该样式只在组件内部起作用(即:样式组件化)
<template> <div class="test"> </div> </template> <script> export default { name: "Test" } </script> <style scoped> </style>
新增页面三步骤:
1) 在views文件中创建视图组件
2) 在router.js文件中配置路由
3) 设置路由跳转，在指定路由下渲染该页面组件(替换根组件中的router-view标签)
补充:
// 1) 小组件代码书写完后将其导出 // 2) 页面组件需要哪个小组件就将该小组件导入并注册,同时将页面组件导出 // 3) 在路由组件中导入页面组件并配置注册
<template> <div class="text2"> <p>text2</p> </div> </template> <script> // 导出该小组件 export default { name: "Text2" } </script> <style scoped> p { color: blueviolet; } </style>
<template> <div class="home"> <T></T> <T2></T2> </div> </template> <script> // 将小组件导入到页面组件并注册 import T from '@/components/Text' import T2 from '@/components/Text2' export default { // 将页面组件对象导出,配置到路由中 name: 'home', // 小组件注册到页面组件中 components: { T, T2 } } </script>
import Vue from 'vue'
import Router from 'vue-router'
// 导入页面组件
import Home from './views/Home.vue'
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
// 配置页面组件路由,名称,并注册
path: '/',
name: 'home',
component: Home
},
},
]
})
全局脚本文件main.js(项目入口)
import Vue from 'vue' // 为项目加载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'); // 挂载index.html文件中的 div 标签
补充:
加载插件环境：路由、仓库、ajax、cookie、element-ui...
加载自定义环境：全局样式（global.css）、全局配置(settings.js)
渲染根组件
改写:
import Vue from '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) { return readFn(App) } });
补充: 静态资源要在main.js中配置
// 配置全局样式 import '@/assets/css/global.css'
Vue项目启动生命周期 与 页面组件的运用(*****)
请求过程:
# 1) 加载mian.js启动项目 i) import Vue from 'vue' 为项目加载vue环境 ii) import App from './App.vue' 加载根组件用于渲染替换挂载点 iii) import router from './router' 加载路由脚本文件，进入路由相关配置 # 2) 加载router.js文件，为项目提供路由服务，并加载已配置的路由(链接与页面组件的映射关系) 注：不管当前渲染的是什么路由，页面渲染的一定是根组件，链接匹配到的页面组件只是替换根组件中的 <router-view></router-view> # 3) 如果请求链接改变(路由改变)，就会匹配新链接对应的页面组件，
新页面组件会替换渲染router-view标签，替换掉之前的页面标签(就是完成了页面跳转
总结: main.js => router.js => 链接 => 页面组件 => 替换根组件中的 router-view 标签完成页面渲染
=> 通过 router-link | this.$router.push() 切换路由(链接) => 完成渲染组件的替换 => 页面的跳转
参与文件:
main.js:
import Vue from '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) { return readFn(App) } });
APP.vue :
<template> <div id="app"> <!-- url路径会加载不同的页面组件 eg：/red => RegPage | /blue => BluePage 来替换 router-view 标签,完成页面的切换 --> <router-view></router-view> </div> </template> 补充: 一般项目开发该文件内也就这五行代码
views/RedPage.vue
<template> <div class="red-page"> <Nav></Nav> </div> </template> <script> import Nav from '@/components/Nav' export default { name: "RedPage", components: { Nav }, } </script> <style scoped> .red-page { width: 100vw; height: 100vh; background-color: red; } </style>
<template> <div class="blue-page"> <Nav></Nav> </div> </template> <script> import Nav from '@/components/Nav' export default { name: "BluePage", components: { Nav } } </script> <style scoped> .blue-page { width: 100vw; height: 100vh; background-color: blue; } </style>
import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import RedPage from "./views/RedPage"; import BluePage from "./views/BluePage"; Vue.use(Router); export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/red', name: 'red', component: RedPage }, { path: '/blue', name: 'blue', component: BluePage } ] })
案例:
<template> <div class="nav"> <!--采用vue-router完成页面跳转，不能采用a标签（会发生页面刷新，本质就是重新加载了一次项目界面）--> <ul> <li> <!--<a href="/">主页</a>--> <router-link to="/">主页</router-link> </li> <li> <router-link to="/red">红页</router-link> </li> <li> <router-link to="/blue">蓝页</router-link> </li> </ul> </div> </template> <script> export default { name: "Nav", } </script> <style scoped> .nav { width: 100%; height: 60px; background-color: orange; } .nav li { float: left; font: normal 20px/60px '微软雅黑'; padding: 0 30px; } .nav li:hover { cursor: pointer; background-color: aquamarine; } .nav li.active { cursor: pointer; background-color: aquamarine; } </style>
<template> <div class="home"> <!-- 3）使用Nav组件 --> <Nav></Nav> </div> </template> <script> // 1）导入Nav组件 import Nav from '@/components/Nav' export default { // 2）注册Nav组件 components: { Nav, } } </script>
