vue项目、路由

Vue项目创建

1) 进入存放项目的目录
>: cd vue_project

2) 创建项目
>: vue create v-proj

3) 项目初始化
  • 输入npm run serve 初始化项目

pycharm配置并启动vue项目

1) 用pycharm打开vue项目
2) 添加配置npm启动

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等配置文件

js原型补充

function A() {}

let a1 = new A();
let a2 = new A();

// 为A类添加原型   类似于类属性
A.prototype.num = 100;

console.log(a1.num);
console.log(a2.num);

// ES6语法下的类
class B {
    constructor(name) {
        this.name = name
    }
}

let b1 = new B('cwz');
let b2 = new B('neo');
B.prototype.count = 666;
console.log(b1.count);
console.log(b2.count);

console.log(b1.name);
console.log(b2.name);

vue项目生命周期

全局脚本文件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'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

// 创建根组件
new Vue({         // 挂载、 渲染挂载点
   el: '#app',
    router: router,   // 把路由、仓库配置到vue对象中
    store: store,
    render: function (read_vue_fn) {
        return read_vue_fn(App)
    }
});
  • 启动项目,加载主脚本文件 mian.js,加载vue环境, 创建根组件完成渲染;加载系统已有的第三方环境:router、store;加载自定义的第三方环境与自己配置的环境,后期项目不断添加

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

  • 新建视图组件.vue(在views文件夹中), 在路由中配置(在router的index.js中),设置路由跳转(在导航栏组件中)

    <router-link to="/user">去用户页面</router-link>  完成标签跳转
    
    this.$router.push('/user')   完成逻辑跳转
    

页面组件

views文件夹下新建Home.vue

<!--
template标签负责组件的html结构,有且只有一个根标签
-->

<template>
    <div class="home">
        <h1>主页</h1>
        <hr>
        <Nav></Nav>
    </div>
</template>

<!--
script标签负责组件的js逻辑:逻辑固定导出(外界才可以导入)
-->
<script>
    import Nav from '../components/Nav'

    export default {
        data() {
            return {}
        },
        methods: {},
        components: {
            Nav,
        }
    }
</script>

<!--
style标签负责组件的css样式:  scoped保证样式的组件化   样式只在该组件内部起作用
-->
<style scoped>

</style>


根组件 App.vue

<template>
    <div id="app">
       <!--页面组件占位符-->
        <router-view/>
    </div>
</template>

配置自定义全局样式

mian.js中配置:

// 配置全局样式  @就代表src文件夹的绝对路径
// import '@/assets/css/global.css'
// import './assets/css/global.css'
require('./assets/css/global.css');   // 官方提倡required加载静态文件

路由逻辑跳转

this.$router     控制路由跳转
this.$route      控制路由数据
this.$router.push('/')  往下再跳转一页
this.$router.go(-2)    go是历史记录前进后退, 正为前进,负为后退,数字为步数


// router文件夹 index.js中
const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
      path: '/course',
      name: 'course',
      component: Course
    },
]

// 其中name的用法:
<router-link :to="{name: 'course'}">课程页</router-link>

路由重定向

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
      path: '/home/',
      redirect: '/',
    },
]

组件的生命周期钩子

  • 一个组件从创建到销毁的众多时间节点回调的方法
  • 这些方法都是vue组件 实例的成员
  • 生命周期钩子的作用就是满足不同时间节点需要完成的事
new Vue({
    el: "#app",
    data: {
        msg: "message"
    },
    beforeCreate () {
        console.log("组件要创建了");
        console.log(this.msg);
                    
    },
    created () {   // 在该钩子中完成后台数据的请求
        console.log("实例创建成功, data, methods已拥有");
        console.log(this.msg);
    },
    beforeMount() {
        console.log("组件准备加载")
    },
    mounted () {  // 特别耗时的数据请求,可以延后到组件初步加载成功,再慢慢请求
        console.log("组件加载完成");
    },
    destroyed() {
        console.log("组件销毁成功了")
    }
    // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块
})

路由传参

第一种:

{
	path: '/course/detail',
	name: 'course-detail',
    component: CourseDetail
}
{
	path: '/detail',
    redirect: '/course/detail'
}
this.$router.push('/course/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
posted @ 2019-12-19 22:56  SetCreed  阅读(411)  评论(0编辑  收藏