vue05-vue项目的创建

CTL
107 阅读6分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

SPA

1.路由跳转:

(1). 在HTML中写死的跳转连接:

a. 不要用a元素

b. <router-link to="/相对路径">文本</router-link>

​ 和路由字典中path一致

c. 原理: 其实<router-link to="/xxx"></router-link> 还是会被翻译为<a href="xxx"></a>

但是，翻译过程中，vue会对a做一些自动的加工.

(2). 在程序中自动跳转:

this.$router.push("/相对路径")

​ 咱们创建的路由器对象router

(3). 路由跳转传参: 3步

a. 配置路由字典中的路由字典项:

{ path:"/相对路径/:变量名", component: 页面组件对象名, props:true}

其中:

  • ​ 变量名 为上个页面传到下个页面的值起一个变量名，便于重复使用。
  • ​ props:true 让地址栏中的上个页面传来的值，自动掉进下一个页面的props中称为一个外来属性/变量。

b. 跳转时如何携带参数值到下个页面:

<router-link to="/相对路径/参数值">

或

this.$router.push("/相对路径/参数值")

强调: 路由传参，在路由字典项的path中定义变量时必须加:。但是，在跳转时传参时既不用加:，也不用加变量名。只写参数值就够了！

c. 下个页面: props:[ "变量名" ]

在下个页面中，就可以像使用自己data中的变量一样使用props中外部传来的变量了。

d. 强调: 一旦配置了路由参数，则进入该页面时就必须携带参数。如果不带参数值，是不让进的！

e. 示例: 实现路由跳转传参:

传值跳转.png

传值跳转V.png

脚手架:

  1. 什么是: 一套已经包含核心功能和标准文件夹结构的半成品项目。

  2. 为什么: 标准化！极其便于协作，降低学习成本。

  3. 何时: 今后所有项目，所有新技术，都是在脚手架基础上开发的.

  4. 如何: 2大步:

(1). 安装可以反复生成脚手架的工具: （老母鸡）

a. 设置淘宝镜像——下载快 npm config set registry registry.npm.taobao.org b. 安装可生成脚手架代码的命令行工具

​ npm i -g @vue/cli

​ 当看到: + @vue/cli@版本号 说明安装成功

(2). 用工具反复为每个项目创建专门的脚手架结构:

a. 决定把项目文件夹保存在哪个位置

b. 再在整个文件夹位置，运行: vue create 自定义项目名

1.png

2.png

3.png

4.png

其实vue的路由有两种模式:

i. hash(#)模式: http://域名:端口号/#/相对路径

ii. history模式: http://域名:端口号/相对路径

​ 需要专业的服务器端工程师配合——必须配置服务器端的首页重定向机制。

5.png

6.png

7.png

8.png

5.使用vscode打开并运行脚手架项目:

(1). 右键单击package.json文件，选择"在集成终端中打开"

(2). 在终端窗口中输入: npm run serve

看到: App running at:

​ - Local: http://localhost:8080/

(3). 按住Ctrl，点local:右侧的连接，自动打开浏览器

问题: 如果无法自动打开，可重装chrome浏览器并配置操作系统的默认浏览器为chrome。

6.脚手架文件夹结构: 还是SPA 4部分

(1). 唯一完整的HTML页面: 一分为三

a. HTML页面基础结构放在public/index.html中

b. <div id="#app"><router-view>放在src/App.vue中

c. new Vue({ router, ... })放在src/main.js中

d. 运行时:

1). src/main.js中引入src/App.vue中的HTML内容

import App from "./App.vue"

2). src/main.js中，将new Vue()和App.vue中的内容建立联系

3). 运行时，唯一完整的html页面头部，自动添加引用:

<script src="app.js">

vue.png

(包含new Vue和App.vue中所有内容)

4). 最终main.js、App.vue以及public下的index.html还是合并在一起运行的。

(2). 页面组件: src/views/

a. 问题: 保存在js文件中，只能写js，不能写HTML和css。如果写HTML，必须写在字符串中，既没有提示，又没有验证。

b. 解决: 脚手架规定: 今后所有组件都必须创建为.vue文件。

c. 什么是: 专门包含一个组件的HTML+CSS+JS的新文件类型

d. 一个.vue文件中标配包含3大部分:

1). <template>专门编写组件的HTML内容</template> i. 问题: 默认vscode不认识.vue文件，所以依然没有提示和颜色

ii. 解决: 安装vscode vetur插件

2). <script>专门包含组件对象</script>

i. 强调: 因为vue脚手架采用的是组件化开发，所以，一个组件js对象，要想抛出，并让别人能够引用，必须使用:

export default { 组件内容 }

​ 抛出 默认组件

ii. 但是，export default {}内的组件内容与前四天所学完全相同！

3). <style>专门保存这个组件专属的css的区域

e. 修改.vue文件内容:

强调: 热编译: 无需停止或重启项目，只要一修改，立刻自动重新编译，重新运行，自动在界面上显示新内容。

(3). 路由器对象: src/router/index.js

a. 相同点: 还是包含2大部分: 路由字典routes和路由器对象router。

b. 问题: 在我们自定义的SPA应用中，明明是路由器中的路由字典routes中要用页面组件对象。但是，偏偏要先引入html文件，再在routes中使用。极其不直观，容易造成误会！

c. 解决: 模块化开发: 每个文件都是一个独立的模块对象。模块之间可以直接引用！无需经过任何第三方中介。——直观，便于维护

d. 如何: 2大步:

1). 抛出: 2种:

i. 标准: 一个组件或对象包含js代码，则必须使用

export default { 组件或对象的内容 }

ii. 简化: 如果一个组件没有js代码，只有HTML和css代码，则一个.vue文件默认就是一个可被别人引用模块对象。

2). 引入: import 自定义对象别名 from "相对路径"

e.结果: 在import所在的模块内，可以像使用自己的对象一样实用引入的模块。

(4). 全局组件和子组件片段: src/components

a. 所有组件都要创建为.vue文件，标准都要包含3部分。只要有js都要export default{}抛出.

b. 全局组件: 2步:

1). 先在src/components/先创建一个普通的子组件.vue 2). 再在main.js中new Vue()之前引入子组件.vue，并将子组件对象转为全局组件

import 子组件对象别名 from "./components/子组件.vue"

... ...

Vue.component("标签名",子组件对象别名)

7.示例: 封装页头组件:

(1). src/components/新建MyHeader.vue

(2). 剪切src/App.vue中

a. <div id="nav">...</div>粘贴到MyHeader.vue中<template>中

b. <style>内#nav{...}及其子内容粘贴到MyHeader.vue中<style lang="scss">中

(3). src/main.js中:

import MyHeader from "./components/MyHeader.vue"

...

Vue.component("my-header",MyHeader)

(4). src/App.vue中<router-view>上方:<my-header></my-header>

vue5.png

避免组件间样式冲突:

1.问题: 明明写在关于页面的h1样式，却覆盖了首页中的h1样式。

2.原因: 其实，虽然我们编写组件时，是在各个.vue文件中分别编写的。但是最终运行时，脚手架会将所有css内容编译到网页的内部样式表中集中保存。结果，不同组件中的选择器，如果碰巧相同，则一定会互相影响。

3.解决: 2个:

(1). 偷懒的，不好的: scoped

a. <style scoped>

​ //范围内的

b. 规定这个<style>内的所有选择器，只在当前组件内有效！

c. 原理:

1). 为css中的选择器自动添加随机名称的属性选择器:

2). 为当前组件中的所有HTML元素自动添加与属性选择器同名的自定义属性。

3). 不同组件的scoped为每个组件添加的随机的属性选择器名各不相同！即使多个选择器碰面，也不会发生冲突。

4). 结果: 只有当前组件内部的HTML元素带有的自定义属性名才能匹配当前组件自己的css中的属性选择器。

d. 问题:

1). 效率低: 为所有元素自动添加自定义属性

2). 只对<style>内的css选择器有效，对于外部引入的css选择器无效！依然会发生冲突

scoped1.png

scoped2.png

主动添加class名:

a. 如何: 2步:

1). 今后，每创建一个组件，都有一个唯一父元素。我们就要给唯一的父元素上加一个与当前组件名相同的class名

<template>
<唯一父元素  class="当前组件名">
    ... ...

2). 只要当前组件内的css选择器，一律用这个唯一父class名开头。

<style>      
    .当前组件名 其它选择器{
	... ...
   }

b. 优点: 万能

scoped3.png

avatar
文章
阅读
粉丝