vue04

vue

目录

  • Vue项目环境
  • 项目的创建
  • vue根据配置重新构建依赖
  • pycharm管理vue项目
  • vue项目目录结构分析
  • vue项目生命周期
  • views文件夹内的.vue文件介绍
  • 配置自定义全局样式
  • 导航栏组件及路由逻辑跳转
  • 路由重定向
  • 组件的生命周期钩子
  • 课程主页渲染
  • 路由传参

Vue项目环境

"""

vue ~~ Django 框架

node ~~ Python 通过node就可以给电脑下载Vue环境,node解释执行js语法

npm ~~ pip node自带npm商城,下载

"""

node语言是C++写的,python语言是C写的

首先,下载node环境:

​ 下载node解释器:点我下载

​ 安装时选择AddtoPath,添加环境变量,其他无需操作,直接next即可;

查看node版本号:

C:\Users\Administrator>node --version

v12.14.0

查看node安装的所有包:

C:\Users\Administrator>npm list

C:\Users\Administrator

`-- (empty)

查看npm的版本号:

C:\Users\Administrator>npm --version

6.13.4

更改镜像源(npm走的是国外的源,现在改成cnpm,走国内的淘宝源;):

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

查看cnpm的版本号:

C:\Users\Administrator>cnpm --version

===============================================================================

cnpm@6.1.1 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)

npm@6.13.4 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)

node@12.14.0 (C:\Program Files\nodejs\node.exe)

npminstall@3.25.2 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)

prefix=C:\Users\Administrator\AppData\Roaming\npm

win32 x64 6.1.7601

registry=https://r.npm.taobao.org

=================================================================================

安装脚手架:

cnpm install -g @vue/cli

清空缓存:

npm cache clean --force

如果安装脚手架失败,基本上是网络原因,可以清空缓存,再安装一次;

C:\Users\Administrator>vue ui

Starting GUI...

Ready on http://localhost:8000 # 在浏览器页面访问Vue 8000端口 是一个可视化界面可以创建vue项目;

项目的创建

创建项目

vue create 项目名 

// 要提前进入目标目录(项目应该创建在哪个目录下)

// 选择自定义方式创建项目,选取Router, Vuex插件

各插件的用途:

*Babel:将ES6语法解析成ES5语法;现在写项目是以ES6语法为主,但是项目形成的时候要把ES6语法解析成ES5语法给浏览器,虽然浏览器对ES6的语法支持几乎100%,但并不是100%的兼容,但ES5是100%的兼容

TypeScript:TS编程使用时,需要勾选,TS对js作了更多层的封装;

Progressive WebApp(PWA)Support 做前台配置,可以优化项目;

*Router:前台的路由,控制页面跳转;

*Vuex:仓库,相当于全局的单例,完成组件之间的传参,为移动端做辅助的;页面刷新时会加载仓库,仓库设置的是默认值,后期逻辑修改了默认值,刷新页面会重新变回默认值,PC端存的值就丢了。主要是给移动端使用的,移动端加载的是app,没有刷新,只能退出、重开;

CSS Pre-processors(CSS预编译器):需要安装less,sass;内部可以写CSS逻辑,定义变量,并将逻辑解析为标准的CSS样式。

Linter/Formatter:格式化代码,统一前台编码规范;做项目的时候安装,2个缩进是对的,4个就是错的。 # 这个默认是选中的,要取消掉。

Unit Testing:测试用

E2E Testing:测试用

创建项目的配置情况:

创建的vue项目,内部文件夹:

启动/停止项目

npm run serve / ctrl+c

// 要提前进入项目根目录


> day62_vproj@0.1.0 serve G:\Python代码日常\day62_vproj

> vue-cli-service serve

INFO Starting development server...

...

...

...

DONE Compiled successfully in 25230ms

App running at:

- Local: http://localhost:8080/ # 使用该端口就可以用浏览器访问Vue项目

- Network: http://192.168.13.73:8080/ # 使用该端口也可以用浏览器访问Vue项目

Note that the development build is not optimized.

To create a production build, run npm run build.


打包项目

npm run build

// 要在项目根目录下进行打包操作

vue根据配置重新构建依赖

创建一个新文件夹,将原项目中的public、src文件夹、以及package.json文件放入新建文件夹中,启动cmd窗口,并进入进件文件夹内,输入如下命令:

cnpm install

然后新项目会根据package.json文件构建项目依赖

如果发现创建的依赖(node_modules)中,缺少某些插件可以自己手动安装:

进入重新新建依赖的项目中,输入如下命令:

cnpm install 插件名(比如ajax)

pycharm管理vue项目

之后,直接在pycharm中启动项目就可以了,直接点击终端链接,就可在浏览器页面打开站点;

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

vue项目生命周期

1.启动项目,加载主脚本文件 main.js

加载Vue环境,创建根组件完成渲染;

加载系统已有的第三方环境:router、store;

加载自定义的第三方环境与自己配置的环境,后期项目不断添加;

2.router被加载,就会解析router文件夹下的index.js脚本文件,完成路由---组件的映射关系;

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

在main.js文件中导入js或者vue后缀的文件可以省略文件的后缀名,在导入img或者css文件时后缀名不能省略;

App.vue中的template内的<router-view></router-view>, 给views文件夹内的.vue组件占位的占位符 多一个views中的文件内容就会在页面中多渲染一次;

public文件夹中的index.html文件中的:

<div > </div>

给跟组件(App.vue)中的<template></template>占位

views文件夹内的.vue文件介绍

1)template标签负责组件的html结构,有且只有一个标签;

2).vue内的script标签负责组件的js逻辑,逻辑固定导出export default {组件内容} (外界才可以导入);

3)style标签负责组件的css样式,scoped参数保证样式的组件化,样式只在该组件内部起作用;

<!--home.vue-->

<template>

<div class="home">

<h1>首页</h1>

<hr>

<Nav></Nav>

</div>

</template>

<script>

import Nav from '../components/Nav'

export default {

data () {

return {}

},

methods:{},

components:{

Nav,

}

}

</script>

<style scope>

h1 {

color:red;

}

</style>

<!--components文件夹下面的Nav.vue文件-->

<template>

<div class="nav">

<h1>导航栏</h1>

</div>

</template>

<script>

export default {

name: "Nav"

}

</script>

<style scoped>

h1 {

color:green;

}

</style>

配置自定义全局样式

全局样式可以写在src>assets文件夹下面自定义的文件夹下面,自己创建一个全局的css样式文件然后在main.js中导入该文件,样式即可生效。

// 配置全局样式:@符号代表src的绝对路径

方式1:

import './assets/css/global.css' // css文件的后缀一定要写

方式2:

import abc from '@/assets/css/global.css' // 把css文件加载成变量abc,然后使用这个变量;如果创建项目时插件Linter/Formatter没被取消掉,因为abc变量没被使用,会报错,这种方法就没办法使用了;

方式3:

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

导航栏组件及路由逻辑跳转

this.$router  # 控制路由跳转

(this.$route) # 控制路由数据

# 方式1:

this.$router.push('/路由名')

# 方式2:

this.$router.push({name: '路由名', query: {拼接的参数}}) # 逻辑跳转 往下再跳转一页

this.$router.go(number) # go是历史记录前进后退,正为前进,负为后退,数字为步数;

# 路由的两种书写方式:

<router-link to="/course">课程页</router-link> # 标签跳转 在html代码内部解析成a标签,href='/course'

'''

<a data-v-65af85a3="" href="/course" class="router-link-exact-active router-link-active">课程页</a>

'''

<router-link :to="{name:'course'}">课程页</router-link>

# src>components>Nav.vue  导航栏组件(小组件)

<template>

<div class="nav">

<div class="content">

<ul>

<li class="logo">

<img src="@/assets/img/aaa.svg" alt="" @click="goHome">

</li>

<li class="route">

<router-link to="/">主页</router-link>

</li>

<li class="route">

<router-link to="/course">课程页</router-link>

<!--<router-link :to="{name:'course'}">课程页</router-link>-->

</li>

</ul>

</div>

</div>

</template>

<script>

export default {

name: "Nav",

methods:{

goHome () {

// console.log('去主页');

// console.log(this.$router); // 控制路由跳转

console.log(this.$route); // 控制路由数据

if (this.$route.path !== '/') {

// this.$router.push('/'); // 再跳转一页

this.$router.go(15); // go是历史记录前进后退,正为前进,负为后退,数字为步数;

}

}

}

}

</script>

<style scoped>

.nav {

width: 100%;

height: 60px;

background-color: #eee;

}

.content {

width: 1200px;

margin: 0 auto;

/*background-color: green;*/

line-height: 60px;

}

.content ul li {

float: left;

cursor:pointer;

}

a {

color:black;

text-decoration: none;

}

.logo {

/*padding-left: 0;*/

padding-top: 10px;

padding-right: 50px;

}

.route {

padding:0 10px 0;

}

.route a {

border-bottom: 3px solid transparent;

}

.route a.router-link-exact-active {

color: orange;

border-bottom-color: orange;

}

</style>

this.$router  # 控制路由跳转

'''

VueRouter {app: Vue, apps: Array(1), options: {…}, beforeHooks: Array(0), resolveHooks: Array(0), …}

afterHooks: []

app: Vue {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}

apps: [Vue]

beforeHooks: []

fallback: false

history: HTML5History {router: VueRouter, base: "", current: {…}, pending: null, ready: true, …}

matcher: {match: ƒ, addRoutes: ƒ}

mode: "history"

options: {mode: "history", base: "/", routes: Array(2)}

resolveHooks: []

currentRoute: (...)

__proto__: Object

'''

(this.$route) # 控制路由数据

'''

{name: "course", meta: {…}, path: "/course", hash: "", query: {…}, …}

fullPath: "/course"

hash: ""

matched: [{…}]

meta: {}

name: "course"

params: {}

path: "/course"

query: {}

__proto__: Object

'''

路由重定向

# router>index.js

const routes = [ // 组件的配置

{

path: '/',

name: 'home',

component: Home

},

{

path: '/home',

redirect:'/'

},

];

组件的生命周期钩子

====>官方文档“生命周期钩子”

1).一个组件从创建到销毁的众多时间节点回调的方法;

2).这些方法都是vue组件实例的成员;

3).生命周期钩子的作用就是满足在不同时间节点需要完成的事;

<script>

import Nav from '../components/Nav'

export default {

data(){

return {

back_data: ''

}

},

methods: {},

components: {

Nav,

},

beforeCreate() {

console.log('Home组件要创建了');

console.log(this.back_data);

},

created() { // 重要方法:在该钩子中完成后台数据的请求

console.log('Home组件创建成功了');

console.log(this.back_data);

},

beforeMount() {

console.log('Home组件准备加载')

},

mounted() { // 特别耗时的数据请求,可以延后到组件初步加载成功后,再慢慢请求

console.log('Home组件加载完成')

},

destroyed() {

console.log('Home组件销毁成功了')

}

}

</script>

课程主页渲染

# views>Course.vue文件

<template>

<div class="course">

<Nav/>

<div class="wrap">

<CourseTag v-for="course in courses" :course="course" /> # 变量course(对象)在小组件的CourseTag中能拿到

</div>

</div>

</template>

<script>

import Nav from '../components/Nav'

import CourseTag from '../components/CourseTag'

export default {

name: "Course",

data() {

return {

courses: [],

}

},

components: {

Nav,

CourseTag,

},

beforeCreate() {

console.log('Course组件要创建了')

},

created() {

console.log('Course组件创建成功了');

// 前后台开发时,是从后台请求数据

this.courses = [

{

id: 1,

title: '西游记',

// img: 'http://...', // 实际是后台图片链接

img: require('@/assets/img/001.jpg'), // 前台逻辑中加载静态资源采用require

},

{

id: 3,

title: '西厢记',

// img: 'http://...', // 实际是后台图片链接

img: require('@/assets/img/002.jpg'), // 前台逻辑中加载静态资源采用require 前台一个组件加载样式,再传给其他组件用,不能通过标签直接去加载,要通过逻辑加载,就是使用require。

},

]

},

destroyed() {

console.log('Course组件销毁成功了')

}

}

</script>

<style scoped>

.wrap {

width: 1100px;

margin: 0 auto;

}

.wrap:after {

content: '';

display: block;

clear: both;

}

</style>

# components>CourseTag.vue文件

<template>

<div class="course-tag">

<img :src="course.img" alt="">

<h2>{{ course.title }}</h2>

</div>

</template>

<script>

export default {

name: "CourseTag",

props: ['course'],

</script>

<style scoped>

.course-tag {

width: 200px;

border-radius: 10px;

overflow: hidden;

background-color: #eee;

float: left;

margin: 10px;

}

.course-tag img {

width: 100%;

height: 240px;

}

.course-tag a {

text-align: center;

font-weight: normal;

font-size: 20px;

display: block;

}

</style>

路由传参

路由知识点概况:

1)路由配置:router/index.js

2)路由跳转与路由渲染:router-link、router-view、$router.push、$router.go

3)路由传参:两种传参

// index.js文件 的路由配置

// 第一种路由传参

path: '/course/detail',

// 第二种路由传参

path: '/course/:pk/detail',

name: 'course-detail',

component: CourseDetail

<!--CourseTag.vue文件-->

<template>

<div class="course-tag">

<img :src="course.img" alt="" @click="goDetail(course.id)">

<!--第一种路由传参-->

方式一:

<router-link :to="`/course/detail?pk=${course.id}`">{{ course.title }}</router-link>

方式二:

<router-link :to="{

name: 'course-detail',

query: {pk: course.id}

}">{{ course.title }}

</router-link>

<!--第二种路由传参-->

<router-link :to="`/course/${course.id}/detail`">{{ course.title }}</router-link>

</div>

</template>

<script>

export default {

name: "CourseTag",

props: ['course'],

methods: {

goDetail(pk) {

// this.$router.push(`/course/detail?pk=${pk}`);

this.$router.push({

name: 'course-detail',

query: {pk: pk}

});

}

}

}

</script>

<!--CourseDetail.vue文件-->

<template>

<div class="course-detail">

<button @click="$router.go(-1)">返回课程主页</button>

<hr>

<h1>第{{ pk }}个课程的详情</h1>

</div>

</template>

<script>

export default {

name: "CourseDetail",

data() {

return {

pk: 0

}

},

created() {

// 获取路由传递的参数:课程的id

// console.log(this.$route);

// console.log(this.$route.query.pk);

this.pk = this.$route.query.pk || this.$route.params.pk;

}

}

</script>

<style scoped>

</style>

====>vue04总结

以上是 vue04 的全部内容, 来源链接: utcz.com/z/377440.html

回到顶部