五、Vue项目

一、项目环境搭载及创建

1. 软件及模块

a. node

用c++编写，用来运行js代码

b. npm/cnpm

终端应用商城

c. vue

用来搭建vue前端项目

2. 安装及下载

a. 安装node

官网下载安装包

b. 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

c. 安装vue项目脚手架

cnpm install -g @vue/cli

p.s.

b或c终端安装失败时，可以清空npm缓存，再重复执行失败的步骤。

npm cache clean --force

3. Vue项目创建

a. 命令行创建

1. 进入存放项目的目录

>: cd ***

2. 创建项目

>: vue create 项目名

3. 项目初始化

推荐选择Babel, Router, Vuex, Linter

b. pycharm配置vue项目

1. app.vue只留下5行代码

2. 路由中只留下home

3. assets中创建css、js、img文件夹

4. css文件夹中创建global.css,写下全局样式

html, body, h1, h2, h3, h4, h5, h6, p, ul {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}
a {
color: black;
text-decoration: none;
}

5. main.js中加载global.css

require('@/assets/css/global.css');

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

三、全局脚本文件main.js（项目入口）

1. 启动时功能

a. 完成vue环境加载

b. 完成组件渲染

c. 加载vue-router、vuex等环境

d. 加载自定义环境

2. 模板

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')

3. 改写

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) {
return readFn(App);
},
});

四、路由跳转

1. 标签跳转

• 
  主页
  


• 
  
  课程页
  

2. 逻辑跳转

export default {
name: "Nav",
methods: {
goHome() {
// console.log(this.$router); // 控制路由跳转
// console.log(this.$route); // 控制路由数据

if (this.$route.path !== '/') {
// this.$router.push('/'); // 往下再跳转一页

this.$router.push({
name: 'home'
});
// this.$router.go(2); // go是历史记录前进后退，正为前进，负为后退，数字为步数
}
}
}

五、路由传参

1. 传参方式总结

配置                   跳转            获取
path:'/user'          to="/user?pk=1" $route.query.pk
path:'/user/:pk' to="/user/1"         $route.params.pk

2. 传参方式一（course/detail?pk=1）

a. router

{
path:'/course/detail',
name:'course-detail',
component:CourseDetail
},

b. CourseTag

c. CourseDetail

3. 传参方式二（/course/1/detail）

a. router

{
path:'/course/:pk/detail',
name:'course-detail',
component:CourseDetail
},

b. CourseTag

c. CourseDetail

六、vue组件（.vue文件）

1. 标签及作用

a. template

有且只有一个根标签。

b. script

必须将组件对象导出，export default{}。

c. style

style标签明确scoped属性，代表该样式只在组件内部起作用。

2. 导航栏组件示例

3. 简单home组件示例

七、vue请求生命周期

1. 浏览器请求/user。

2. router插件映射User.vue组件。

3. User.vue组件替换App.vue中的占位符。

八、组件生命周期钩子

1. 定义

组件从创建到销毁中的时间节点回调的方法

2. 钩子种类