码迷,mamicode.com
首页 > 其他好文 > 详细

VUE 基础 三

时间:2019-12-20 01:00:17      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:成员   cache   历史记录   插件   user   启动   占位符   title   fun   

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,不能使用箭头函数来定义方法,

VUE 基础 三

标签:成员   cache   历史记录   插件   user   启动   占位符   title   fun   

原文地址:https://www.cnblogs.com/allenchen168/p/12071017.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!