12.19 vue环境搭建

Posted lidandanaa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了12.19 vue环境搭建相关的知识,希望对你有一定的参考价值。

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

以上是关于12.19 vue环境搭建的主要内容,如果未能解决你的问题,请参考以下文章

spring练习,在Eclipse搭建的Spring开发环境中,使用set注入方式,实现对象的依赖关系,通过ClassPathXmlApplicationContext实体类获取Bean对象(代码片段

Vue环境搭建和项目创建

Vue项目环境搭建

Vue环境搭建以及生命周期

vue2 组件库开发记录-搭建环境(第二次架构升级)

vue 环境搭建