1219 Vue项目创建及基础

目录

vue项目

js原型补充

prototype 类似于给类添加类属性

function A(){}

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

为A添加原型
A.prototype.num = 100;

console.log(a1.num)

推导

Vue.prototype.$ajax = 12345
可以通过 this.$ajax获取属性12345

1. 项目创建

cmd创建

cd至创建文件的文件夹

vue create v-proj(项目名)

选择自定义创建

  • Babel 兼容ES5语法,把ES6语法解析为ES5语法

  • Router 前台路由

  • Vuex 仓库 相当于全局的单例(为移动端服务)

  • Linter / Formatter      规范代码编写(目前不用,做项目用)

选项:

img

第一次创建会下载配置依赖
文件较多

可视化创建

vue ui

会自动启动socket客户端界面 8000

可视化创建

2. 项目启动

npm run server

关闭cmd即关闭项目
使用pycharm连接

vue重新构建依赖

核心文件:
	public文件夹
	src文件夹
	package.json 文件

cd到缺少依赖的文件夹中
cmd输入 cnpm install
	自定义安装模块cnpm install 模块组件名
自动创建models文件夹

pycharm管理vue项目

  • 使用pycharm打开创建好的项目

  • 自定义解析方式,使用npm

  • 设置参数

    img

安装解析vue

img

3. 项目目录介绍

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

index.html

当前项目唯一的页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
      适配ie浏览器
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
      适配手机端
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
      定义页面图标
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>v-proj</title>
  </head>
  <body>
      定义页面不支持js之后的提示
    <noscript>
      <strong>We're sorry but v-proj doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
      根组件的模板替换的挂载点
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

index.js

路由

定义了路由的url配置

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

App.vue

根组件

定义了小组件的组合,页面的跳转

main.js

全局脚本文件,项目的入口

main.js  
导入
	加载了文件资源
	import 别名 form '资源'
	如果导入的资源直接是名字,一定是在node_modules文件夹中
	. 是当前,文件可以省略后缀

导出
	main导入的资源都是导出的
	export default '资源组件'

// 导入项目文件资源
// import 别名 from 资源
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');   // 挂载点

// 转换根组件
new Vue({
    el:'#app',
    router:router,    //路由
    store:store,      // 仓库
    // 定义render的渲染函数,进行页面的渲染,创建vue即渲染
    render:function (read_vue_fn) {
      // 将读取的二进制流返回出去
        return read_vue_fn(App)
    }
});

components文件夹

在文件夹中定义子组件(小组件),在views文件夹中定义页面组件时

必须先导入 import nav from '组件所在路径'
然后注册才能使用
<nav> </nav>

4. 项目生命周期

1.启动项目

  • 加载主脚本文件main.js
  • 加载vue环境,创建根组件完成渲染
  • 加载系统已有的第三方环境:router,store
  • 加载自定义的第三方与自己配置的环境:后期项目不断添加

2.router被加载

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

3.视图

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

app渲染

页面组件的占位符<router-view></router-view>

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

5. 文件式组件

页面组件

views文件夹中定义页面组件

  • template标签负责组件的html结构,有且只有一个根标签
  • script标签负责组件中的js逻辑:逻辑固定导出(外界才可以导入),方式:export default {组件内容}
  • style标签负责组件的css样式:scoped保证样式的组件化 - 样式只在该组件内部起作用
<!--template标签负责组件的html结构,有且只有一个根标签-->
<template>
  <div class="home">
    <h1>主页</h1>
    <hr>
    <Nav></Nav>
  </div>
</template>

<!--script标签负责组件中的js逻辑:逻辑固定导出(外界才可以导入)-->
<!--export default {组件内容}-->
<script>
  // 导入小组件
  import Nav from '../components/Nav'
    export default {
        data(){
            return{}
        },
        methods:{},
        // 注册组件
        components:{
            Nav,
        }
    }
</script>

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

自定义全局样式

assets文件夹中定义静态资源img、css、js文件夹

创建css样式

/*全局css样式*/

html,body,h1,h2,ul {
    margin: 0;
}
ul {
    list-style: none;
}

在main.js中导入才能使用(官方建议加载静态文件使用require)

import '@/assets/css/global.css'  // @ 符号默认代表src文件夹

import './assets/css/global.css'
import abc from './assets/css/global.css' // 定义别名abc 导入(别名使用)

require('@/assets/css/global.css');     // 官方建议加载静态文件使用require
let s = require('@/assets/css/global.css');

6. 路由跳转

标签跳转

url跳转

<router-link to="url地址"> 链接页 </router-link>

通过name跳转

<router-link :to={name:'name对应的字符'}> 链接页 </router-link>

逻辑跳转

this.$router路由跳转

// 控制路由跳转
	this.$router.push('url')
	
利用name跳转
	this.$router.path(){
		name='home'
	}

控制历史记录前进后退

	this.$router.go(-3)		// 后退3页(正为前进,负为后退,数字为步长)

this.$route路由数据

路由的地址
	this.$route.path('/')

路由重定向

redirect:"url"

两个路由path对应一个component注册组件

router文件夹中index.js文件

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/home',
    component: Home
  }
]
-------------------------------------------------------
可以更改为
      {
        path: '/home',
        redirect: '/',	   //路由的重定向
      }

7. 生命周期钩子

  • 一个组件从创建到销毁的众多时间节点回调的方法
  • 这些方法都是Vue组件实例的成员
  • 声明周期钩子的作用就是满足在不同时间节点需要完成的事

vue实例组件的生命中的回调函数.

钩子就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。或者说你想在出生阶段去约炮，也是不行的。组件也是一样，每个阶段它的内部构造是不一样的。所以一般特定的钩子做特定的事，比如ajax获取数据就可以在mounted阶段。

img

img

咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了，总结一下，对官方文档的那张图简化一下，就得到了这张图。

img

beforeCreate

在实例初始化之后,数据观测和event/watcher事件配置之前被调用

created()

重要方法:在该钩子中完成后台数据的请求

实例创建之后调用

destroyed

vue实例销毁后调用

beforeMount

实例组件准备加载调用

mounted

实例组件加载完成调用

个别耗时多的数据请求,可以延后到组件初步加载成功后,再慢慢请求

昨日回顾

"""
1、组件：
	html、css、js的集合体
	vue实例就代表组件
	组件用template实例成员管理html结构，有且只有一个根标签
	子组件可以复用，所以数据要组件化处理，data的值由方法的返回值提供

2、分类：
	根组件：new Vue({})，顶级组件
	全局组件: Vue.component('组件名', {})，不用注册可以在任何地方使用
	局部组件：let 组件名 = {}，只有在注册的父组件中才能使用
	
3、组件间传参：
	父传子：自定义属性
	<tag :info="msg"></tag>
	
	let tag = {
		props: ['info'],
	}
	new Vue({
		data: {msg: 12345}
		components: {
			tag,
		}
	})
	
	子传父：自定义事件
	<tag @action="fn"></tag>
	
	let tag = {
		data: {msg: 12345},
		methods: {
			tag_fn() {
				this.$emit('action', this.msg)
			}
		}
	}
	new Vue({
		components: {
			tag,
		},
		methods: {
			fn(info) {}
		}
	})
	
4、vue项目环境
	官网下载安装node => 将npm换源为cnpm => cnpm install -g @vue/cli
	
	=> vue项目创建...
"""

今日总结

"""
1、创建项目：vue create 项目名  -  babel、vue-router、vuex

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）路由传参：两种传参
"""
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/fwzzz/p/12070831.html