VUE 基础 三

Posted 2020-11-23 allenchen168

目录

• VUE环境搭建
• VUE 项目创建
• VUE 项目文件介绍
  • 1、项目目录
  • 2、配置文件：vue.config.js
  • 3、main.js
  • 4、.vue文件
• vue请求生命周期：
• VUE 组件
• 配置全局样式
• 路由逻辑跳转，跳转到home页为例
• 路由重定向
• 生命周期钩子

VUE环境搭建

1、安装node

官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

2、安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安装脚手架

cnpm install -g @vue/cli

4、清空缓存处理

npm cache clean --force

VUE 项目创建

1、创建项目

vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件

2、启动/停止项目

npm run serve / ctrl+c
// 要提前进入项目根目录

3、打包项目

npm run build
// 要在项目根目录下进行打包操作

VUE 项目文件介绍

1、项目目录

dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖 (不同电脑依赖需要重新构建)
public: 共用资源
src: 项目目标,书写代码的地方
    -- assets:资源
    -- components:小组件
    -- views:视图组件（页面组件）
    -- App.vue:根组件，固定五行代码
    -- main.js: 项目入口，总脚本文件 - 配置所有环境，加载根组件
    -- router.js: 路由文件，规定路径与页面组件对应关系
    -- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)

2、配置文件：vue.config.js

module.exports={
    devServer: {
        port: 8888
    }
}
// 修改端口,选做

3、main.js

new Vue({
    el: "#app",
    router: router,
    store: store,
    render: function (h) {
        return h(App)
    }
})

4、.vue文件

<template>
    <!-- 模板区域 -->
</template>
<script>
    // 逻辑代码区域
    // 该语法和script绑定出现
    export default {    // 固定导出
        
    }
</script>
<style scoped>
    /* 样式区域 */
    /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>

vue请求生命周期：

    浏览器请求/user => router插件映射User.vue组件 => User.vue组件替换App.vue中的<router-view />占位符
    注： i) 可以用 <router-link to="/user">用户页</router-link>完成标签跳转
        ii) this.$router.push('/user')完成逻辑跳转

VUE 组件

组件文件内部有一下三部分：
template：
    template标签负责组件的html结构：有且只有一个根标签
script：
    script标签负责组件的js逻辑：逻辑固定导出 export default {组件内容}
style：
    style标签负责组件的css样式：scoped保证样式的组件化 - 样式只在该组件内部起作用

配置全局样式

在main.js文件中写如下两行代码中的任意一行代码，

@就代表src文件夹的绝对路径，官方提倡require加载静态文件

// import '@/assets/css/global.css'
require('@/assets/css/global.css');

路由逻辑跳转，跳转到home页为例

1、去组件文件的template中，在需要设置跳转的标签中设置点击事件@click="goHome"，
2、去script中的export default下面的methods中写：
    goHome（）{this.$router.push({name: 'home'});}
注意：
this.$router;  // 控制路由跳转
this.$route;  // 控制路由数据
this.$router.go(2);  // go是历史记录前进后退，正为前进，负为后退，数字为步数

路由重定向

重定向是指，当用户输入一个路由，但没有对应的页面组件时，将这个路由设置为指向另一个路由，从而访问到那个路由对应的页面。这种设置就是重定向。实际上就是设置多个路由指向同一个页面。以home页面为例：

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/home',
        redirect: '/',   // 这就是路由的重定向
    },
];

生命周期钩子

1）一个组件从创建到销毁的众多时间节点回调的方法
2）这些方法都是vue组件实例的成员
3）生命周期钩子的作用就是满足在不同时间节点需要完成的事
最常用的是   created(){}  |  mounted(){}
除此之外还有：
beforeCreate
beforeMount
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured
注意：
这些生命周期钩子自动绑定了this，不能使用箭头函数来定义方法，