【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程_vue-cli 路由(1)

nodejs把浏览器解释js的那一套嵌入到nodejs里面，例如控制台的使用

前面学习了普通组件以后，接下来我们继续学习单文件组件则需要提前先安装准备一些组件开发工具。否则无法使用和学习单文件组件。
一般情况下，单文件组件，我们运行在 自动化工具vue-CLI中，可以帮我们编译单文件组件。所以我们需要在系统中先搭建vue-CLI工具，
官网：https://cli.vuejs.org/zh/
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

nodejs官网 https://nodejs.org/zh-cn

Windows安装nodejs ，直接点点点安装

安装liunx版本的nodejs

使用nvm安装： 需要开代理 用普通用户执行安装

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

或者

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash  

安装成功会有这些提示：

同理，它会自动的添加到环境中，

最后需要激活环境：*bash *source ~/.bashrc or zsh source ~/.zshrc，或者干脆重启终端。之后就可以正常使用了

nvm list-remote

安装nodejs

nvm install v18.16.0

linux安装完毕

Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似，所以可以说它是属于前端的后端语言，后端语言和前端语言的区别：

• 运行环境：后端语言一般运行在服务器端，前端语言运行在客户端的浏览器上
• 功能：后端语言可以操作文件，可以读写数据库，前端语言不能操作文件，不能读写数据库。

我们一般安装LTS(长线支持版本)：

下载地址：https://nodejs.org/en/download/【上面已经安装了nvm，那么这里不用手动安装了】

node.js的版本有两大分支：

官方发布的node.js版本：0.xx.xx 这种版本号就是官方发布的版本

社区发布的node.js版本：xx.xx.x 就是社区开发的版本

Node.js如果安装成功，可以查看Node.js的版本,在终端输入如下命令：

node -v

nvm可以管理nodejs版本

nvm工具的下载和安装： https://www.jianshu.com/p/d0e0935b150a

​ https://www.jianshu.com/p/622ad36ee020

安装记录:
打开:https://github.com/coreybutler/nvm-windows/releases

常用的nvm命令

nvm list-remote   #查看有哪些版本可以安装
nvm list   # 列出目前在nvm里面安装的所有node版本
nvm install node版本号      # 安装指定版本的node.js

例子：nvm install 14.15.1

nvm uninstall node版本号    # 卸载指定版本的node.js
nvm use node版本号          # 切换当前使用的node.js版本 

如果使用nvm工具，则直接可以不用自己手动下载，如果使用nvm下载安装 node的npm比较慢的时候，可以修改nvm的配置文件(在安装根目录下)

# settings.txt
root: C:\tool\nvm    [这里的目录地址是安装nvm时自己设置的地址,要根据实际修改]
path: C:\tool\nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/

nodejs包管理工具，常用的有npm和yarn npm在找一些包依赖时比较差劲，容易安装失败 npm无法控制安装包的版本 yarn可以指定版本安装

现在新版本的npm安装时生成个安装记录文件，里面记录了安装的包的版本。把项目部署到线上的时，npm会根据记录文件安装指定版本

npm

在安装node.js完成后，在node.js中会同时帮我们安装一个npm包管理器npm。我们可以借助npm命令来安装node.js的包。这个工具相当于python的pip管理器。

npm install -g 包名              # 安装模块 -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list                        # 查看当前目录下已安装的node包
npm view 包名 engines            # 查看包所依赖的Node的版本 
npm outdated                    # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 卸载node包
npm 命令 -h                      # 查看指定命令的帮助文档

nodejs安装好后，自动会给我们安装一个npm

安装Vue-cli

npm install -g vue-cli
npm install -g vue-cli --registry https://registry.npm.taobao.org

如果安装速度过慢，一直超时，可以考虑切换npm镜像源：http://npm.taobao.org/

指令：

1 //临时使用
2 npm install jquery --registry https://registry.npm.taobao.org
3
4 //可以把这个选型配置到文件中，这样不用每一次都很麻烦
5 npm config set registry https://registry.npm.taobao.org
6
7 //验证是否配置成功
8 npm config list 或者 npm config get registry
9
10 //在任意目录下都可执行,–global是全局安装，不可省略
11 npm install --global cnpm 或者 npm install -g cnpm --registry=https://registry.npm.taobao.org
12
13 //安装后直接使用
14 cnpm install jquery

安装vue-cli

nvm是node.js的版本管理工具

1 安装node.js 自带npm

2 通过npm 安装vue-cli 它的运行需要依赖node.js的环境

使用Vue-CLI初始化创建项目

生成项目目录

使用vue自动化工具可以快速搭建单页应用项目目录。

该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

// 生成一个基于 webpack 模板的新项目
先创建个目录，用来存放项目

mkdir vuepro

vue init webpack 项目名

例如：

vue init webpack myproject

vue-cli默认是不安装vue-router的，选y安装

是否用严格模式运行js代码，选否

看到这个表示项目创建好了

看下项目，类似django创建的项目

启动服务：
先进入项目cd firstblood 运行

npm run dev

nodejs用自己内置的socket将项目运行起来，默认端口号是8080

虚拟机内部访问，这就是vue提供的首页

在pycharm中查看项目：
build是打包发给服务端部署，打包时用到的工具

config是目前的前端项目的配置文件，比如项目启动时的端口等

node_modules，运行当前项目所需要的依赖包环境，部署项目的时候，把它删掉

npm装的包，生成一个package-lock.json文件，里面记录了各个依赖包的版本等信息

部署时，把node_modules目录删掉， 运维人员只需要进入目录，执行npm install
就可以根据package.json package-lock.json 把相关依赖包都下载好

现在vue-router不再是以js文件形式引入了，而是以模块包的形式引入

开发重点关注的是src目录，vue是开发单页面应用，src里面就是把各个组件，引入的文件等都划分到不同的文件和文件夹中

main.js里面只创建了一个vue对象

导包的含义：当我们引入node_modules 第三方包时，from ‘包名’ 自动会去里面找到包名
相当于从vue-router包里面引入抛出的对象 Router是自定义的名称
name是组件别名，可以忽略
访问什么路径，找相应组件
@符号代指的是src路径，@/components/HelloWorld 指的是src目录下 compoents下面的HelloWorld组件

vue-cli中，要想使用路由，必须使用vue对象.use(路由对象) 固定用法

在vue-cli中，一个.vue文件就是一个组件。一个.vue文件点开就是一个template模板

分三个标签，template标签用来写网页标签，script标签 用来写剩余的js代码 style标签用来写css样式

引入某个对象，某个对象必须export default抛出来，才能引入
引入.vue文件时，.vue是不用写的

这个引入的是router目录下index.js中抛出的对象，目前这个文件中只抛出了vue-router对象
引入index文件时，只需引入其所在目录，自动引入该文件

单页面应用，单页面就是这一个index.html文件，里面只做了圈地

前端项目可以自己单独运行，不依赖后端，拿动态数据需要请求后台项目
后端项目和页面完全没关系，只提供数据

pycharm可以新建.vue文件，就是组件，右键

如果右键没发现vue Component 可以下载vue插件 install
安装完成后重启pycharm

npm run build 给项目打包部署用的

vue-cli是针对vue2使用的

vue3使用的是vite

// 启动开发服务器 ctrl+c 停止服务

cd myproject

npm run dev           # 运行这个命令就可以启动node提供的测试http服务器

那么访问一下命令执行完成后提示出来的网址就可以看到网站了：http://localhost:8080/

项目目录结构

src 主开发目录，要开发的单文件组件全部在这个目录下的components目录下

static 静态资源目录，所有的css，js，图片等文件放在这个文件夹

dist项目打包发布文件夹，最后要上线单文件项目文件都在这个文件夹中[后面打包项目,让项目中的vue组件经过编译变成js 代码以后,dist就出现了]

node_modules目录是node的包目录，

config是配置目录，

build是项目打包时依赖的目录

src/router 路由,后面需要我们在使用Router路由的时候,自己声明.

项目执行流程图

整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,
main.js中会导入顶级单文件组件App.vue,
App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。

基于vue-cli创建的项目，稍作修改。访问不同路径展示不同页面

有人会问，为什么路由里面多个#
vue-router中有两种路由模式，
1、默认是哈希模式，哈希模式就加了个#，其他啥也没干
2、history模式

history模式配置方式：

export default new Router({
  mode:'history',  #去掉路由中的#，以后都用这个模式
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/course',
      name: 'Course',
      component: Course
    },
  ]
})

vue-cli默认是没有安装axios的，现在需要安装axios
在当前项目中，

npm install axios -S / --save   #表示给当前项目安装axios

npm install axios -g  #表示全局安装，每个创建的项目都安装

看到node_modules里面有了axios

从node_modules中导入包时，直接from ‘包名’，一般在main.js中引入

看axios官网，怎么在vue框架中使用

官网使用方法比较麻烦，我们可以使用原型链的方式把axios封装到vue对象当中
我们可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。
这种情况下，可以通过在原型上定义它们使其在每个 Vue 的实例中可用。

1. 基本示例
   在main.js中添加一个变量到 Vue.prototype

Vue.prototype.$appName = 'My App'
这样 $appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以   可用通过this.$appName调用

new Vue({
  beforeCreate: function () {
    console.log(this.$appName)
  }
})

2. 为实例prototype设置作用域
   为什么 appName 要以 $ 开头？这很重要吗？
   这里没有什么魔法。$ 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。
   如果我们设置：

Vue.prototype.appName = 'My App'

那么如下的代码输出什么：

new Vue({
  data: {
    // 啊哦，`appName` 也是一个我们定义的实例 property 名！
    appName: 'The name of some other app'
  },
  beforeCreate: function () {
    console.log(this.appName)
  },
  created: function () {
    console.log(this.appName)
  }
})

日志中会先出现 “My App”，然后出现 “The name of some other app”，因为 this.appName 在实例被创建之后被 data 覆写了。
我们通过 $ 为实例 property 设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定，诸如 $_appName 或 ΩappName，来避免和插件或未来的插件相冲突。

3. 注册和使用全局变量
   每个组件都是一个vue实例，Vue.prototype加一个变量，只是给每个组件加了一个属性，这个属性的值并不具有全局性。
   比如以下例子：
   
   

点击 home 中的 change name 再跳转about，about里面还是显示 main in test2

如果要实现全局变量的功能，需要把属性变为引用类型

Vue.prototype.$appName = { name: 'main' }

后面使用 this.$appName.name 改变和引用相应的值
这进入 about 后显示 test1 in test2

应用示例：

// 相应组件
<script>
  export default{
    data(){
      return{
        userId:666,　　　　　　　　　
        token:'',
      }
    },
    created(){
      this.$axios({
        method:'post',
        url:'api',
        data:this.qs.stringify({    //这里是发送给后台的数据
          userId:this.userId,
          token:this.token,
        })
      }).then((response) =>{          //这里使用了ES6的语法
        console.log(response)       //请求成功返回的数据
      }).catch((error) =>{
        console.log(error)       //请求失败返回的数据
      })
    }
  }
</script>

Vue.prototype.

a

x

i

o

s

=

a

x

i

o

s

/

/

起个名字叫

axios = axios //起个名字叫

axios=axios//起个名字叫axios

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题