hualinux 进阶 vue 3.1：vue cli手工创建Vue router

目录

一、 vue-cli安装

二、使用vue cli手工安装带router功能的项目

2.1 以手工方式创建一个vue项目

2.2.1 选择安装方式

2.1.2 选择安装的组件

2.2.3 选择版本

2.2.4 选择历史模式

2.2.5 选择css预处理器

2.2.6 选择配置

2.2.7选择

2.2.8 选择配置文件

2.2.9 是否保存为预设

2.2.10 安装

2.2.11 安装完成

三、vue router目录结构介绍

---

使用vue cli默认安装是没有路由功能的，所以得手工安装。

webStorm选择手工安装和vue cli使用create命令再选手工选择是一样的。我这里就使用了webStorm安装了。

一、 vue-cli安装

webStorm选择手工安装和vue cli使用create命令再选手工选择是一样的。我这里就使用了webStorm安装了。每一个选项我简单做一个解释。

在这里我就不讲了，不懂的可以看我的《 使用Vue cli工具以npm安装vue》中第一和第二部分。

二、使用vue cli手工安装带router功能的项目

2.1 以手工方式创建一个vue项目

打开webStorm，我已经升级为目前最新版本2021.1，关闭之前打开的工程

File->Close Project

新建一个工程

PS：这里的手工方式和vue create <项目名> 效果是一样的，只不过是在webStorm中显示而已。

2.2.1 选择安装方式

default (babel, eslint) 默认（javascript编译器,javascript代码检查工具）
Manually select features 手动选择

PS：上下箭头是移动，空格是选择，a是全选，i是反选，回车是确认。

2.1.2 选择安装的组件

(*) Babel javascript编译器，用来解析es6代码 【因为一些浏览器不能识别es6代码，babel工具可以将es6代码转译成浏览器能够识别的代码
( ) TypeScript 类型脚本，是JavaScript的超集，支持所有JavaScript语法。用于：静态类型检查，智能提示函数名等，代码重构[重命名符号--可以对所有的引用都进行修改；自动更新引用路径；修改函数名等会校验提示。]；可读性。
( ) Progressive Web App (PWA) Support 渐进式网络应用程序。优点[可靠--当无网状态时，也可以立即加载出页面pwa;快速--网页加载速度很快；不用从应用商店下载，可以直接添加在用户的主屏幕上，提供类似于app的使用体验，意味着不用流量]
(*) Router 路由管理器 用于实现页面交互[控制页面跳转]，切换页面的时候不需要重新加载页面，单页面应用，不重新加载页面，不跳转到新页面，只是页面上的组件切换。还可以实现页面间传递参数
(*) CSS Pre-processors css预处理器 作用:[文件切分；模块化--方便代码分层，复用，依赖管理；选择符允许嵌套；变量--给属性值一个变量，方便风格统一，换肤等；运算--让值与值之间建立联系；函数；Mixin--类似于函数，用来产生一段css代码;工程化]
(*) Linter / Formatter 代码规范标准
( ) Unit Testing 单元测试
( ) E2E Testing e2e测试

2.2.3 选择版本

我这里选择2.x稳定版本

2.2.4 选择历史模式

使用路由器的历史模式？（需要为生产中的索引回退设置正确的服务器，即需要服务器支持）

2.2.5 选择css预处理器

选择一个css预处理器（默认情况下支持postcss、autoprefixer和css模块）

2.2.6 选择配置

ESLint with error prevention only eslint仅具有错误预防功能
ESLint + Prettier eslint是代码规范和错误检查工具

我这里选择是默认，即第1项 

PS：如果你不懂得什么是Sass可以搜索一下。

2.2.7选择

设置是否在开发环境下每次保存代码时都启用 eslint验证。

2.2.8 选择配置文件

建立 配置还是包文件，我这里选择默认

2.2.9 是否保存为预设

是否将此设置保存为将来项目的预设，我这里选择N

2.2.10 安装

回车之后就可以安装了， vue会根据你的选择会自动安装这些组件，有了vue cli是不是很方便？！

2.2.11 安装完成

下面是安装完成后的界面，发现webStorm自动帮添加了npm服务器，点运行即可。

运行看一下效果，

运行之后，没错，可以打开浏览器输入 http://<ip地址>:8080

三、vue router目录结构介绍

这里的目录结构只比默认安装多了router路由目录和views视图目录，这个也是router功能之一。我就不多介绍了，可以看我的《hualinux 进阶 vue 2.1：vue cli默认项目结构及其vue编写规则》

我这里我只讲router，里面只有一个js文件index.js，主要实现其路由功能的，如下图所示：

从上图中就知道，这里的功能是把URL的路径映射给指定的组件中，当输入这个路径就调用对应的组件处理并显示处理结果。毕竟vue属性前端，主要还是展示的作用。这里的组件统一放在views目录中，如下图所示：

PS：我们在普通的编程开发中，比如spring boot和django中路由是路径与函数的绑定。有的也是路径映射到对象。

PS：上面Home组件引用了HelloWorld组件。

上图中App.vue写的是路由，非不是引用HelloWorld组件了。而是一些vue router特有标签。这里是导航。