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      规范代码编写(目前不用,做项目用)

选项:

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

可视化创建

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

• 设置参数

  

安装解析vue

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

当前项目唯一的页面

  
    
      适配ie浏览器
    
      适配手机端
    
      定义页面图标
    
    
  
  
      定义页面不支持js之后的提示
    
      根组件的模板替换的挂载点
    

    
  

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 '组件所在路径'
然后注册才能使用
 

4. 项目生命周期

1.启动项目

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

2.router被加载

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

3.视图

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

app渲染

页面组件的占位符

5. 文件式组件

页面组件

views文件夹中定义页面组件

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

自定义全局样式

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跳转

 链接页  

通过name跳转

 链接页  

逻辑跳转

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阶段。

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

beforeCreate

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

created()

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

实例创建之后调用

destroyed

vue实例销毁后调用

beforeMount

实例组件准备加载调用

mounted

实例组件加载完成调用

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

昨日回顾

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

2、分类：
    根组件：new Vue({})，顶级组件
    全局组件: Vue.component('组件名', {})，不用注册可以在任何地方使用
    局部组件：let 组件名 = {}，只有在注册的父组件中才能使用
    
3、组件间传参：
    父传子：自定义属性
    
    
    let tag = {
        props: ['info'],
    }
    new Vue({
        data: {msg: 12345}
        components: {
            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中的占位符
    注： i) 可以用 用户页完成标签跳转
        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）路由传参：两种传参
"""