vue环境搭建 - wtfss

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类的原型：类属性

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {

        }
    })
</script>
<script>

    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('Tom');
    let b2 = new B('Ben');
    B.prototype.count = 666;
    console.log(b1.count);
    console.log(b2.count);

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

    // 推导
    Vue.prototype.$ajax = 12345;
    // this.$ajax

</script>
</html>

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
@click='page=tv'不需要写单个的变量引出方法函数，因为逻辑可以直接实现，直接把逻辑写在事件里面
'./App.vue'，一个点就是当前路径，导入文件夹可以省略后缀，文件最好带上后缀
页面内容变了但是不会刷新的a标签
两次占位，index.html给根组件占位，根组件给页面组件占位
把导航栏单独写成一个页面组件，哪个页面需要导航栏，就在哪个页面的components中注册一下导航栏
页面组件如果有script中的逻辑，要导出export default{ }，导出以后router中的路由才能导入；根组件也要导出，导出以后根组件才能导入。
方法中：处理逻辑时，this.$router.push('path')控制路由跳转，this.$route控制路由数据。
this.$router.go() go是历史记录前进或后退，里面数字正为前进，负为后退。

posted on 2019-12-19 22:19 wtfss 阅读(201) 评论(0) 收藏举报