12.19 vue环境搭建

Posted 2021-03-22 lidandanaa

vue项目目录结构分析

├── 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）路由传参：两种传参

全局脚本文件 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({
    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

• 加载vue环境，创建根组件完成渲染
• 加载系统已有的第三方环境：router、store
• 加载自定义的第三方环境与自己配置的环境：后期项目添加的地方

2.router被加载，就会解析router文件夹下的index.js脚本文件，完成路由-组件的映射关系

3.新建视图组件.vue（在views文件夹中），在路由中配置（在router的index.js中），设置路由跳转（在导航栏组件Nav.vue）

vue组件(.vue文件)

template标签负责组件的html结构：有且只有一个根标签

script标签负责组件的js逻辑：逻辑固定导出 export default {组件内容}

style标签负责组件的CSS样式：scoped保证样式的组件化-样式只在该组件内部起作用

• 前台逻辑中加载静态资源采用require