Fork me on GitHub
image frame

tanz-Blog

Webpack4.0

一、最基础的基础

1.1 使用版本

package version
node v14.19.0
npm v6.14.16
webpack v4.41.2
webpack-cli v3.3.10

1.2 全局安装

1
2
npm install webpack@4.41.2 -g
npm install webpack-cli@3.3.10 -g

1.3 本地工程

新建一个本地工程文件夹，然后使用npm启动，生成package.json文件

1
2
3
4
5
6
//cd到指定文件目录
cd E://xxx/xxx/xxx

//
npm init -y

1.4 构建本地工程的包文件

1
2
npm install webpack@4.41.2 -D
npm install webpack-cli@3.3.10 -D

1.5 撰写code

在package.json所在路径下新建src文件夹，并在src文件夹内新建code文档，书写代码。

这里有一个问题就是为什么要新建一个src必须把code放入src文件夹下，因为在这里用的还是一些默认的配置，等以后用webpack.config.js进行详细配置的时候就可以任意配置编译文件位置了。

1.6 启动webpack编译

1
2
3
4
5
6
cmd中敲入如下代码执行
webpack --mode=development   //开发者模式
webpack --mode=production    //生产模式

*注：webpack到4.0之后加入mode模式，通过设置mode来确定编译模式，其中开发者模式是没有进行代码混淆的，生产模式有代码混淆

编译后的结果会生成一个dist文件夹，在文件夹内的文件就是编译后的结果，这时再新建一个html引入编译后的文件即可运行

二、基础的进阶–热更新

第一part所使用的都是最基本的东西，没有使用插件，也没有使用webpack的打包文件，生成的html也不能实现热更新（即每次更新完代码，都需要手动编译一遍，再刷新页面才能得到新的结果）。

2.1 webpack-dev-server

热更新是通过webpack-dev-server插件实现的，其简写为WDS，有如下特点：

  • 不会刷新真个页面
  • 不输出文件，而是放在内存中
  • 使用webpack自带的HotModuleReplacementPlugin插件

2.1.1 version

package version
webpack-dev-server v3.9.0

2.1.2 安装

1
npm install webpack-dev-server@3.9.0 -D

2.2 webpack 配置

新建webpack.config.js,这里除了配置入口和出口，主要配置devserver

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const {resolve} = require('path');
module.exports={

    entry:"./index.js",//打包的文件入口
    output:{
        filename:"build.js",//打包后的文件名
        path: resolve(__dirname,"dist"),//resolve的作用是拼接路径，__dirname是当前文件所在的绝对路径
    },
    /**loader,处理资源的加载器*/
    module:{},
    /*插件*/
    plugins: [],
    /*模式，development是开发者模式--可以调试，production是生产环境模式--发布的混淆代码*/
    mode:"development",
    /*webpack 服务*/
    devServer: {
        hot:true,//热更新
        open:true,//自动在浏览器打开
        contentBase:resolve(__dirname,'dist'),//发布的路径，dist目录，--实测没有这个路径会无法发布
        port:7800,
        host:"0.0.0.0",
        historyApiFallback:true,
        useLocalIp:true,//是否使用本地ip
        proxy:{
            '/action':'http://127.0.0.1:8080'
        }
        
    }
}

再在cmd中敲入如下命令，得到的结果是在dist路径下生成一build.js，然后把build.js引入html后可以在页面中调用

1
webpack --config webpack.config.js --mode development

2.3 设置为devserver 启动

在package.json中的scripts中可以添加键值对，作为启动命令，这里添加server

1
2
3
4
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "server": "webpack-dev-server --mode development --inline --progress --config webpack.config.js "
},

这样在index.js中改完后，在html中就会直接运行。

2.4 前提

在这种启动方式的前提是在dist已经有html，并且我们已经人为把打包好的包的引入html中

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="build.js"></script>//如果这里不写，则webpack不知道该引入哪个文件进来

</body>
</html>

三、再进阶–动态生成html

在第二part解决了热更新的问题，并引入webpack.config.js配置文件作为配置项，逐渐变得正常化了，接下来开始要引用plugins等来解决html生成问题，现在是手动生成，完全可以用插件实现自动生成。

3.1 安装html-webpack-plugin

1
npm install html-webpack-plugin@3.2.0 -D

3.2 配置插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入插件
module.exports = {

    entry: "./index.js",//打包的文件入口
    output: {
      ....
    },
    /**loader,处理资源的加载器*/
    module: {},
    /*插件*/
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html",//模板文件路径和文件名，路径是相对于package.json的路径，打包时自动会配置到dist文件夹下
            filename: "index.html"//这里可以带路径打包好后，在dist文件夹下的路径生成的html的文件名称
        })
    ],
    /*模式，development是开发者模式--可以调试，production是生产环境模式--发布的混淆代码*/
    mode: "development",
    /*webpack 服务*/
    devServer: {
       ...
    }
}

3.3 使用

新建的html模板是这样子的，除了基本框架没有写任何的script引用，因为到时候会自动引入进来

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

可以在cmd命令行中敲入

1
webpack --config webpack.config.js --mode production

也可以在package.json中的scripts中添加一个启动命令，这里添加的是build

1
2
3
4
5
6
7
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "server": "webpack-dev-server --mode development --inline --progress --config webpack.config.js ",
  "build": "webpack --mode production"
},
 
 *注：这里没有写--config webpack.config.js,是因为webpack默认会在package.json所在路径找这个webpack.config.js这个文件，所以可以省略

3.4 更多的配置

这里不上图了，手敲

属性名 字段类型 默认值 有用 说明
title String webpackApp √ 网页document.title的配置
filename String index.html √ html文件生成的名称，生成路径在output.path的目录
template String 空 √ 生成filename文件的模板，如果存在src/index.html，默认会使用这个模板，模板路径会从项目的根路径开始匹配
templateParameters Boolean|Object|Function 空 覆盖默认的模板中使用的参数
inject Boolean|String true √ 打包后的css和js插入html中的位置，true或body会放到body底部，head会放到head元素中去
favicon String 空 为生成的html配置一个favicon
mete Object {} 为生成的html注入一些mete信息，如：{viewport：”width=device-width，initialscale=1，shrink-to-fit=no“}
base Object|String|false false 在生成的html中注入base标签。eg:base:”https://exanple.com/path/page.html",标签为页面上所有的链接规定默认地址或默认目标
minify Boolean|Object production？true：false 设置静态资源的压缩情况
hash Boolean false √ 如果为真，则所有包括js和css文件附加一个唯一的weback编译的uuid，这对于更新每次的混村文件名非常有用
cache Boolean true √ 设置js css 文件的缓存，当文件没有发生变化时，是否设置使用缓存
showErrors Boolean true 当文件发生错误是，是否将错误信息显示在页面
xhtml Boolean false 如果为true的时候将会标签设置为符合xhtml规范的自闭合形式

四、loader样式打包

Nginx操作配置

Nginx 简述

Nginx是一个很热门的反向代理服务器，它功能上可以实现各种代理，比如三级域名跳转，端口跳转等等，也正是因为其功能的强大也往往会让人觉得很难学~但事实上是，学通可能需要一定时间经验积累，但是入门实现一些需求真的很容易！

首先，安装就是很友好的，下载下来的是一个免安装包，它不想SQL那样需要各种安装步骤，需要各种环境配置，所以的功能都在其conf/nginx.conf下配置实现，及其容易，现在先说安装.

Nginx 安装

这里是下载链接，下载界面如下，我下载的是稳定版本的呃。

image-20220216154414596

##content
there is sth
#end

GitHub操作文档

一、基础操作

1、克隆远端文件

1
git clone

2、把文件添加到本地版本库

1
git add

3、提交修改

1
2
把对文件的修改提交并写明修改说明，提交到本地版本库
gti commit -m “这里是修改说明”

4、获取远端文件

1
2
git fetch
这一步只是把远程文件获取下来，但是并没有在工作目录中展示

5、变基

1
2
git rebase
变基，这一步会把远程获取下来的文件放入到工作目录，并且会对比两个文件是否有内容冲突，并提示处理冲突

6、提交

1
2
3
4
把本地代码推送到远程仓库
git push origin 
如果是提交到分支仓库
git push origin 分支名

到上面为止是一个基本的代码提交更新的过程，但是4、5 两步可以合并为下面这一步，但是和下面这一步又有所不同

7、拉取

1
2
git pull
这一步执行后，获取后的远端文件就会在工作目录中展示了，但是默认是不变基的，在TortoiseGit中可以选为变基，如果选中后就是一模一样了

8、 分支

8.1 创建分支

1
git branch 分支名

8.2 查看所有分支

1
git branch -a

8.3 切换分支

1
git checkout 分支名

8.4 切换并创建分支

1
git checkout -b 分支名

二、用Tortoise Git 常用操作

1、本地建库

1
2
git create respository
这里可以鼠标右键操作--在这里创建本地仓库

2、关联远程仓库

1
2
3
这一步就只能在git bash 里实现了
执行 git remote add origin https://github.com/xxxx/xxxx.git

3、合并分支

1
2
3
4
5
因为本地建仓一般是在master分支上，远程我的很多仓库是在origin分支上，所以需要合并分支
1. 查看本地所有分支 可以使用git bash的 git branch -a 查看
2. 鼠标右键切换远程origin分支 即remote/origin选项
3. 鼠标右键合并分支，被合并的是本地的master分支
4. 可以在远端把master分支给删除了

三、建立子模块

1、将子模块添加到主目录

1
2
3
4
5
1. 先在git上建立一个仓库，这里建立的是typora-仓库
2. 打开gitbash，输入git submodule add {子模块仓库url}{要将子模块内容放入到的文件夹名}
	如 git submodule add https://github.com/ouStanz/typora- source 
	`注意这里的source 是要将typora- 中的内容放入的文件夹，不用手动创建，要改名的原因是hexo需要用到source作为发布内容文件夹`

2、查看子模块

1
git submodule

3、启动子模块并更新

1
2
3
4
5
6
1. 分步骤启用
	git submodule init
	git submodule update
2. 可以使用 git submodule update --init --recursive 递归启用，这等同于1的分步骤
3. 可以使用也可以递归克隆这个项目git clone {子模块url}{子模块名}

4、多个子模块操作

1
2
3
4
5
多个子模块可以使用git submodule foreach git {命令}
1. 先初始化子模块 git submodule update --init --recursive
2. 子模块获取 git submoduel foreach git fetch
3. 子模块合并 git submodule foreach git pull
4. 子模块更新 git submodule foreach git update

5、 删除子模块

1
2
3
4
5
6
7
8
1. 删除本地仓库 git rm --cached {文件名}
	git rm --cached source
2. 删除远程的仓库git -rf {文件名}
	git -rf source
3. 删除相关配置文件中和要删除的子模块相关的信息，分别是
	.gitmodules
	.git/config
	.git

四、出错处理

Failed to connect to github.com port 443: Operation timed out

1
2
3
4
5
git config --global --unset http.proxy

git config --global --unset https.proxy

git config --global http.sslVerify "false"

Hexo 基础操作

Quick Start

配置环境

  1. 安装node，下载的是node v-14.19.0版本

  2. 安装hexo-cli，cmd中使用npm install hexo-cli -g进行全局安装，需要注意的是现在hexo是v6.0.0版本，需要node 的v12以上版本，初始化一个hexo的博客配置

    1
    2
    3
    1. 在要建博客的文件夹下，cmd敲入hexo init myBlog,这里的myBlog是一个文件夹名字
    2. 继续cmd敲入 cd myBlog ，这里是进入myBlog文件目录
    3. npm install 安装了环境

  3. 安装git，官网下载安装即可

本地开启博客服务–新建一篇博客

新建我的一篇博客，博客名为“第一篇博客”hexo new 第一篇博客

生成博客内容 hexo generate

启动服务预览hexo server -p 7099这里默认是4000，但是我的4000端口被占用了，改成了7099端口

所有命令都可以简写

1
2
3
4
5
hexo new === hexo n “博客名” 创建博客
hexo generate === hexo g 生成
hexo server === hexo s 启动服务
hexo clean  清除缓存--这里尝试了不能用hexo c
hexo deploy ===hexo d 部署

创建后的博客模板是这样的

1
2
3
4
5
---
title: 第一篇博客
date: 2022-02-15 11:21:17
tags:
---

上面的title 、date、tags 在post.md中进行，渲染
不写的话会出现没有标题名的问题

image-20220215112309564

用markdown语言（我用的是typora编辑器）书写博客内容，然后用hexo s 发布出来就可以本地浏览了

Git托管服务发布博客

GitHub配置

  1. 需要先在github上创建一个pulic仓库，名字为.github.io,这也是以后发布的博客地址c

hexo的配置

  1. 因为是发布首先需要配置基本文件
1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/ouStanz/ouStanz.github.io.git
  branch: master
  1. 需要下载hexo联合git发布的插件npm install hexo-deployer-git --save
  2. 配置好后就可以通过指令发布了，一般需要晴空下缓存，然后生成发布
1
2
3
hexo clean
hexo g
hexo d

这样之后就可以在浏览器输入.github.io产看博客了

绑定个人域名

现在的域名是git提供的，可以自己申请一个绑定，比如绑定在xxxx.cn

阿里云域名

我的是阿里云买的域名，所以在阿里云控制台，进行解析，把github的服务器地址添加进去，是192.30.252.153 和 192.30.252.154 ，解析路线选默认，主机记录时@，记录类型是A类即可

1
2
3
4
5
1. 首先要有一个自己的域名，比如我的是xxxx.cn
2. 但是我这个域名是主域名，不想作为博客的域名使用，而是要将其作为其他的网站域名，但是又不想重新买个域名，所以就想办法建立一个二级域名，把git域名绑定到这个二级域名上
3. 步骤来了，在阿里云的域名dns解析那里添加一个新的记录，就设置为blog.xxx.cn,记录类型是CNAME，记录值是我的git域名，
4. 在git上的settings中，左边找到pages，右边下滑找到cutom domain，把刚刚添加的二级域名地址填进去，save就可以了
`注意· 这里我本来想在云主机用nginx设置一个域名跳转，但是域名绑定只能绑定80端口，所以没有实现用次级域名直接完成nginx代理跳转，最后找到阿里云方式跳转`

git域名操作

登录github建的那个博客仓库，点击settings，设置custom domain，输入域名，如xxx.top

然后再再博客文件夹myBlog下的source文件夹下创建CNAME文件（不写后缀），里面写入域名egs365.top,最后在发布一遍就可以了

详细配置

基本配置

在_config.yml下可以实现网站的个性化配置很有意思

Site

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述–主要用于百度SEO推广，包含网站关键字
author 您的名字–网站的作者
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。

url

参数 描述
url 网址–自己的网站域名如ouStanz.github.io
root 网站根目录
permalink 文章的 永久链接 格式
permalink_defaults 永久链接中各部分的默认值

permalink一般不用更换，也可以根据官网描述换成自己喜欢的，示例为

参数 描述
:year/:month/:day/:title/ 2013/07/14/hello-world
:year-:month-:day-:title.html 2013-07-14-hello-world.html
:category/:title foo/bar/hello-world

Front-matter

就是最开始说的---分割的部分，存放title、date、tag的，也可以配置更多内容

参数 描述
layout 布局
title 标题
date 建立日期
updated 更新日期
comments 开启文章的评论功能
tags 标签（不适用于分页）—不具有顺序性
categories 分类（不适用于分页）–具有顺序性
permalink 覆盖文章网址
top 文章置顶–数字越大越靠前

layout

到目前为止，我们可以看看博客地址的目录结构了，scaffolds是存放模板的文件夹，默认提供了三个模板，咱这里可以根据自己的需求新建模板

post

新建的博客文章内容给都是在_posts文件夹下，而_posts文件夹下所有内容的构建布局模板其实是在scaffolds文件夹下的post.md中，也就是通过命令hexo n 新内容新建的博客最开头都有设置好的title、date、tags这三部分模板内容，如post.md中的模板改成这样

1
2
3
4
5
6
7
8
9
10
11
---
title: {{ title }}
date: {{ date }}
tags:{{tags}}
---
#quick start

##content
there is sth
#end

执行hexo n newpage1后得到的结果就是这样的

image-20220215142552526

其实还有很多其他的方式。hexo提供了三种布局方式

布局 布局文件路径 内容文件路径路径
post scaffolds/post.md source/_posts
page scaffolds/page.md source
draft scaffolds/draft.md source/_drafts

而当使用hexo n newpage时，其实完整命令是hexo new [layout]<title>，只不过layout默认为post而已

page

如果想另起一页用page的模板，可以使用命令hexo n page board，这样就建立了以page为模板的board文件夹，对应的内容就可以在board文件夹下写，如果想访问就可以用链接http://127.0.0.1:7099/board去访问，外网链接格式一致

draft

是草稿文件模板，即以该模板写的文章不会被别人看到，内容会放在source\_draft文件夹下，如果想要预览则可以通过hexo server --draft预览，最后想post的话可以使用 hexo publish draft newpage把想要post的部分内容pulish出去

网页图片不现实问题

1
2
3
1. post_asset_folder: true 这一步之后再source/post 下新建md的时候会生成一个同名的文件夹
2. 执行 npm install https://github.com/CodeFalling/hexo-asset-image --save
3. {% asset_img img.png 图片说明 %}

主题的

可以更换主题啦啦啦~~，原主题实在是太丑了，这是更换主题地址，看好哪个下载下来（简约风格又NexT、hueman）等，从github下载后在_config.yml的theme部分换成主题文件夹的名字就行了

然后进入主题文件夹下，找到—config.xml.example，复制一份，重命名为_config.xml就好了

我这用的是Ayer，看着不错

customize

在主题文件夹下的source/css/images中放入需要的图片，然后配置主题的_config.yml文件中先对应的路径就可以了

1
2
1. 这里有一个问题在theme文件夹下有个ayer主题文件，因为是直接clone的别人的主题，所以这个文件夹clone下来后要把.git删了
2. 如果要把ayer下的文件放到私有云，必须把ayer/source里面的内容同步提交，我就是没有删除.git，然后source文件没提交，在其他电脑clone下来后发布出来的博客没有主题

插件(必需)

  • hexo-generator-searchdb 用于搜索

    1
    COPYnpm install hexo-generator-searchdb --save

    然后将以下配置复制到你博客根目录下的 _config.yml 里（注意不是 ayer 目录下的）:

    1
    2
    3
    4
    5
    COPY# hexo-generator-searchdb
    search:
      path: search.xml
      field: post
      format: html

  • hexo-generator-feed 用于生成 RSS 订阅

    1
    COPYnpm install hexo-generator-feed --save

    然后将以下配置复制到你博客根目录下的 _config.yml 里（注意不是 ayer 目录下的）:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    COPY
    # Extensions
    ## Plugins:https://hexo.io/plugins
    # RSS订阅
    Plugin:
    - hexo-generator-feed
    # Feed Atom
    feed:
      type: atom
      path: atom.xml
      limit: 20
      hub:
      content:
      content_limit: 140
      content_limit_delim: " "
      order_by: -date

插件(可选)

1
2
3
4
5
6
npm install --save hexo-blog-encrypt

然后再文章title加入password
title: Hello World
date: 2016-03-30 21:18:02
password: hello

更多插件请见 hexo 插件市场

分类

1
COPYhexo new page categories

然后将以下复制到 /source/categories/index.md 文件

1
2
3
4
5
6
COPY
---
title: categories
type: "categories"
layout: "categories"
---

标签

1
COPYhexo new page tags

配置同分类一样

友情链接

1
COPY hexo new page friends

然后将以下复制到 /source/friends/index.md 文件

1
2
3
4
5
COPY---
title: friends
type: friends
layout: "friends"
---

然后在 ayer 主题目录下的 _config.yml 中自定义 friends_link 配置项即可

相册

1
COPYhexo new page photos

然后将以下复制到 /source/photos/index.md 文件，img_url 替换成图片路径，caption 替换成图片名称

1
2
3
4
5
COPY---
title: Gallery

albums: [["img_url", "img_caption"], ["img_url", "img_caption"]]
---

文章目录

用 Tocbot 解析文章标题并生成目录

  • 将以下配置复制到你 ayer 主题目录下的 _config.yml 里：
1
2
COPY# Toc
toc: true
  • 当然你可能并不想所有文章都生成悬浮目录，你可以在文章顶部的配置中加一行来进行关闭：
1
2
3
COPY---
no_toc: true
---

相关学习链接

  1. hexo史上最全搭建教程_Fangzh的技术博客-CSDN博客_hexo
  2. 基于 Hexo 的全自动博客构建部署系统 - KChen’s Blog
  3. ayer文档

结语

Hexo还是很好用的。

README

typora-

typora新建的笔记仓库

本仓库在远端的typora-中存储，编辑有typora编辑器进行

博客发布由hexo联合git发布静态博客服务，发布的博客服务有git托管

VUE-CLI

Vue-CLI

一、关于CLI

1、什么是CLI

cli：command-line interface 命令行界面cli：command-line interface 命令行界面

2、什么是Vue-CLI

Vue-CLI 是一个基于vue.js进行快速开发的完整系统，使用Vue脚手架开发的页面奖是一个完整的项目

3、Vue-CLI的优势

  • 通过@vue-cli可以搭建一个交互式的项目脚手架，通过执行命令的方式下载相关的依赖

  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

  • 一个运行时依赖 ( @vue/cli-service)，该依赖：

    • 可升级，一个命令就可以升级；
    • 基于 webpack 构建，并带有合理的默认配置；==》项目打包，编译好的项目源码直接放到服务器上使用
    • 可以通过项目内的配置文件进行配置；
    • 可以通过插件进行扩展。vue v-charts element-ui

  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。 Nodejs ，Vue Router，webpack，yarn

  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

二、Vue-CLI的使用

1、创建脚手架项目

vue init webpack myVue

huiVent
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
huiVent
- build-------->用来使用webpack打包使用的build以来
- config------->用来做整个项目配置的目录
- node_modules---->用来管理项目中使用的依赖
- src --------->用来书写vue的源代码
	assets    ----用来存放静态资源
	components ---用来书写vue组件
	js         ---
	router     ---配置项目中的路由
	App.vue    ---项目中根组件
	main.js    ---项目中主入口
- static       ---其他静态
- test
- .babelrc     ---将es6语法转换成es5运行
- .editorconfig---项目编辑配置
- .eslintignore
- .eslintrc.js
- .gitignore
- .postcssrc.js---使用源码相关js
- index.html
- package.json
- package-lock.json
- README.md

2、项目运行

npm start

3、Vue-CLI中项目的开发方式

1
2
3
注意：一切接组件 一个组件中 js代码 html代码 css代码
1、Vue-CLI开发方式是一个一个的组件，用组件分割成一个一个的功能模块，日后可以将多个组件组合到一起形成一个前端系统
2、在使用Vuel-CLI进行开发时不在书写html，而是编写的一个个组件，在打包时Vue-CLI会把组件编译成一个html文件

4、如何开发Vue-CLI

4.1 一切接组件

注意：在Vue-CLI中一切皆组件

主入口为main.js，因为一切皆组件，所以在主入口中，根页面也作为组件，即把App.vue作为组件导入

不建议对根Vue实例进行更改

1
2
3
4
5
6
7
8
9
10
11
<template>
  <div id="app">
    <router-view/>//到了这里就会去掉router文件夹下index.js进行当前路径需要进行加载哪些控件
  </div>
</template>
new Vue({
  el: '#app', //绑定Vue实例全局作用范围
  router,
  components: {App},//注册组件
  template: '<App/>'
})

4.2 Router

Vue-CLI分配页面是通过router来分配的，在router文件夹下的index.js文件管理页面路由，path规定了127.0.0.1:8080/这后面跟的路径，当在浏览器url地址栏输入地址后，router会自动寻找相应路径下的页面。

这里做了个尝试，当放置两个相同的路径时，默认加载前面那个路径的内容，如果想把两个组件放到一起，要用下面说的单页内引用其他组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default new Router({
  routes: [

    {
      path:'/',
      name:'Regist',
      component:Regist
    },
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
  ]
})

如果需要将两个或多个路径都指向一个组件内容，可以用重定向redirect 

1
2
3
4
5
6
7
8
9
10
11
routes: [
{
  path: '/',redirect:'/home'//像这样,路径'/'和'/home'都会指向/home,显示HellowzWorld
},
{
  path:'/home',
  name: 'HelloWorld',
  component: HelloWorld
},
]

4.2.1 引用其他组件–通过路由方式

在App.vue的template中加入 表示要引用这个路由下的内容，这个只能在根路径下使用，因为其他路径下已经规定好了router

1
2
3
4
5
6
7
8
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/> 

    <Footer></Footer>
  </div>
</template>
4.2.2 单页内引用其他组件–不是通过路由方式

import引入的是对应vue中的全部，而在components中配置了之后可以使用，在组件配置过后，将要放置的组件用

这种形式把想要组织的组件放到要放的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <Footer></Footer>
  </div>
</template>

<script>
  import Footer from './components/Footer'
export default {
  name: 'App',
  components: {Footer},
}
</script>

//而在Footer.vue中
<template>
    <div>
      这里是egs365 的地界，备案号是1234567654321
    </div>
</template>

<script>
    //这里并没有导出什么
</script>

<style scoped>

</style>


4.2.3 路由切换

通过链接方式切换不同路由页面

1
2
<a href="#/">主页</a>
<a href="#/regist">分页</a>
4.2.4 子路由

在一些页面下，点击功能键，会有用到子路由的情况，子路由的配置方式如下。注意add

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export default new Router({
  routes: [
  {
    path: '/',redirect:'/home'
  },
  {
	//一级路由
    path:'/home',
    component: HelloWorld
  },
    {
      path:'/home',
      name:'Regist',
      component:Regist,
      children:[{
	   //add前面不需要加斜杠，因为不是一级路由
       path:'add',component:UserAdd//这里就是子路由
      }]
    },
  ]
})

使用的时候在regist的template下引用

1
2
3
4
5
6
7
<template>
    <div>
      <div>这个是账号注册页面</div>
      <a href="#/regist/add">添加</a>//引用功能链接
      <router-view/>//路由引用
    </div>
</template>
4.2.5 路由传参

属性绑定 :href=””+user.id

this.$route.query.id

4.2.6 监听路由变化

this.$router.push(‘/user’)

5、使用axios

  • 安装npm install axios --save-dev

  • 在main.js中配置

    1
    Vue.prototype.$http=axios;//修改内部的$http为axios

  • 使用axios，在需要发布异步请求的位置：this.$http.get()—因为这里已经替换为axios了

6、rap2

rap2就是一款在线模拟数据生成器，可以拦截Ajax请求，其作用在于帮助前端工程师独立于后端进行开发，实现前后端分离。

7、v-model 实现双向绑定

8、@click

Vue-CLI 后端部分

Vue-CLI项目该打包部署

  1. 在项目的根目录中执行如下命令
1
2
3
vue run build// 打包
/**vue打包的项目必须在服务器上运行*/
打包之后当前项目有一个dist目录
  • Copyrights © 2015-2022 tanz
  • 访问人数: | 浏览次数:

请我喝杯咖啡吧~