本期文章主要介绍下cli脚手架、element-ui框架和路由传参的四种方式，想看哪部分直接目录定位就好
cli脚手架
创建一个项目我们必然需要很多文件，我们可以选择使用CLI脚手架来帮我们快速生成一个项目结构，上期讲路由的时候用的是vite脚手架，感兴趣可以翻看上期文章vue单页开发之router详解 - 掘金 (juejin.cn)
安装步骤
- 任意路径终端安装好cli脚手架
css
npm i -g @vue/cli -g是指装在全局中的，安装完后输入：vue --version是可以看到版本号的，这就代表你安装成功
-
在指定路径下打开终端，创建项目
luavue create element-ui -
安装完成后选中第三个选项------Manual
注意这里的选项，用空格选中Babel、Router、Css Pre-processors。选了router就会给你生成一个router文件，这样就不需要自己额外创建路由了。Babel的作用是把最新的语法降低到让浏览器可以读懂
-
Y/n这里我们直接回车，默认选中大写
-
然后选中Sass/SCSS (with dart-sass)
这是预处理器，scss是轻量级的
- N/y我们直接回车，默认选中大写的
- 安装生产环境-element-ui
css
npm install element-plus --save项目启动
此时打开package.json文件找到scripts，里面是serve就npm run serve
一般还会有start和dev。他会给你生成一个本地的链接，按住ctrl打开
现在我们就在vscode中打开这个文件，你会发现里面生成了许多文件，其实跟上前文章讲的vite大差不差，我们解释下几个重要文件。
-
node_modules：用来存放依赖，源码，比较大，一般不会上传至仓库。删了可以npm i再下回来 -
public：用来存放公共的资源，唯一的页面index.html放在了这里，vite脚手架是放在了外面 -
views：自动给你生成了首页Home.vue和关于页About.vue（因为有了路由才能称之为页面，否则是代码片段），可自行修改或删除 -
main.js：引入了vue的源码，和路由，并且use掉路由 -
.gitignore：上传仓库时过滤掉node_modules -
.browserslistrc： 生成特定浏览器版本的代码，因为vue3用得最新的es6的语法，导致无法兼容IE11及以下版本 -
babel.config：配置需要什么不需要什么，高级版本代码降级 -
jsconfig.json：cli的一个配置文件。target中es5指的是将es其他版本转成es5，项目说明书。里面有个好定西，@/就是src/目录下，这样就不用打点来看路径了 -
package-lock.json：是package.json的附属文件，package.json就是记录该项目用上了什么东西，项目说明书。而package-lock.json是记录vue源码及第三方源码安装的时候来自哪里，有迹可循，不影响项目运行。 -
vue.config.js：vue的配置项
Element-UI
element-plus网址：安装 | Element Plus (element-plus.org)
非常好用的UI框架，仅对vue生效。里面封装了许多好用的组件，比如时间选择器，轮播图（走马灯），还有图标。
当然你如果会写这些东西，你是完全可以拿来抄的，毕竟谁不希望早点下班呢[doge]
有些小伙伴可能就纳闷了，我们现在为了写js更方便，用了vue框架，现在为何还需要element这个框架，element-ui是个UI框架，可以直接拿来用，并不影响什么
安装
这就是上面安装步骤六，我们用的npm包，选择对应的指令npm install element-plus --save
注：安装前记得终止当前项目
--save表示这个库的源码需要安装在生产环境
环境分为开发环境和生产环境
生产环境：项目开发完部署在服务器的环境。
生产环境很好理解，开发完毕后可以还需要使用，可以给你带来生产力。而开发环境就比如less，开发结束后我们浏览器并不需要读懂它，他安装在开发环境
引入
引入有三种方式：完整引入，按需引入，手动导入。这里我们选用完整引入，先不考虑性能
只需要在main.js中引入这三行代码
javascript
import ElementPlus from 'element-plus' // 引入组件库
import 'element-plus/dist/index.css' // 引入组件的样式
use(ElementPlus)测试
链接丢一份：element-ui组件
准备工作做完了，我们现在试试看引入是否成功，我们随便选择一个组件，就选用第一个按钮
点击查看源代码
选中喜欢的按钮，复制代码到页面中去
这里我选用的primary，放到项目首页中去
bash
<el-button type="primary">Primary</el-button>这个标签并非html自带的，而是人家自己封装的标签。
如果你能看到效果就代表你安装成功了
element-ui写一个首页
我们先简单实现一个登录页面，因为本篇文章还需要讲解路由传参，这里的情景是学生选课系统。用户登录完后用户名可以在其他页面显示。
先将cli脚手架生成的默认东西删掉：App.vue中的nav标签，以及所有样式。components/HelloWorld.vue，把vue文件删掉。router/index.js中引入的两个路由删掉，routes数组清空。views/下的两个vue页面删掉
先写一个登录页面
这里我就手动切一个页面，后面再用ui框架
注意：一般页面组件我们都是写在src/views文件夹中
组件分为：父子组件、页面组件(views)、通用组件(components/common)、框架UI组件、业务组件(/components)
Login.vue
这里用的optionsAPI的写法，公司目前大多数是这个写法
vue3有两种写法：optionsAPI：vue2使用的传统api；compositionAPI：vue3新引入的API
xml
<template>
<div class="login">
<div class="login-wrap">
<div class="item">
<span>账号：</span>
<input type="text" v-model="account">
</div>
<div class="item">
<span>密码：</span>
<input type="text" v-model="password">
</div>
<div class="item">
<button @click="login">登录</button>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
// v-model 可以双向绑定 实时把内容记录到数据源中 写好后input框中也会有，vue指令文章讲过
account: 'admin',
password: '123456',
}
},
methods: {
login() {
if(this.account === '' || this.password === ''){
alert('账号密码不能为空')
return
}
this.$router.push(`/home/${this.account}`)
}
}
}
</script>
<style lang="less" scoped>
.login {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center; // 主轴居中
align-items: center; // 垂直居中
// justify-content align-items都是弹性才能用的，因此要让他变成弹性容器
background-color: antiquewhite;
.login-wrap{
width: 400px;
height: 300px;
background: wheat;
border-radius: 10px;
box-shadow: 0 0 100px #bb8787; // 盒子阴影：x偏移 y偏移 扩散范围 颜色
padding: 20px;
// 这样是默认的标准模式，会撑开整个容器，440px
// 加一个IE模式 box-sizing: border-box;
font-size: 30px;
.item{
display: flex;
margin-top: 20px;
input{
// input是行内块元素，可以设置宽高
flex: 1; // 前提是父容器也要是弹性容器
padding: 0 10px; // 上下 左右
font-size: 20px; // 输入字体大小
border-radius: 8px;
border: none;
}
button{
font-size: 30px; // button字体不受父容器字体影响，另外设
flex: 1;
border-radius: 1000px; // px单位写100 1000都可以，再大两边都是圆形，50%会变椭圆
border: none; // 不要默认边框
background-color: rgb(121, 98, 203);
color: white;
padding: 5px 0; // padding: 上下 左右 刚好把button撑开
cursor: pointer; // 鼠标变成小手
}
}
}
}
</style>我们用less写样式的最大优点就是可以嵌套写样式 ，以前写css总是因为取名字而头疼，有了less就不需要了，当然还有个优点是可以设置变量。less后面有个scoped代表私有化
效果如下
cli脚手架默认用的8080端口号
首页布局
链接：layout布局
这里面有很多首页布局，我们选中自己最喜欢的，然后引入人家的div代码即可，不过这里面没有给你样式。这里我选用如下布局
拿到人家给你的类名自己写样式即可。
另外我希望名字那里可以鼠标移上去了就会给你下拉选择框。就是引入一个下拉菜单，里面还有样式，可以自行修改。
Home.vue
xml
<template>
<div class="common-layout">
<el-container>
<el-header>
<span>选课系统</span>
<el-dropdown>
<span class="el-dropdown-link">
欢迎{{$route.params.user}}
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item>个人详情</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.common-layout {
height: 100vh;
.el-container {
height: 100%;
.el-header {
background-color: antiquewhite;
height: 80px;
line-height: 80px;
font-size: 30px;
display: flex;
justify-content: space-between; // 弹性容器中所有子容器用空格隔开，只有两个时，一左一右
}
}
}
.el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
font-size: 24px;
}
</style>效果如下
下面开始介绍本期文章重点，Login页面的数据传给Home页面路由的四种方式，路由传参经常会用上，非常重要！
这里涉及到三个文件，中间需要用上router的index.js文件，另外两个就是两个页面：Home.vue、Login.vue
路由传参的四种方式
方法一：this.$router.push(/home/${this.account})
需要在路由配置中声明该路径可以携带参数：'/home/:user'
这种方法传参会在地址栏中显示参数
router/index.js
javascript
const routes = [
{
path: '/home/:user',
component: () => import('@/views/Home.vue')
}
]声明路由的时候允许可以带参，加一个冒号代表参数
views/Login.vue
javascript
this.$router.push(`/home/${this.account}`) js中云括号${}字符串拼接变量
views/Home.vue
bash
欢迎{{$route.params.user}}html中不是写this，而是{{$}}，$route代表url地址（router是路由对象），params是参数的意思
方法二：this.$router.push({path: '/home', query: {user: this.account}})
它会将参数以？的形式拼接在url中，这个方法用得最多
参数以？的形式拼接在路由后面
router/index.js
javascript
const routes = [
{
path: '/home/',
component: () => import('@/views/Home.vue')
}
]路由后面不需要声明参数
views/Login.vue
kotlin
this.$router.push({path: '/home', query: {user: this.account}})用对象包裹，后面带一个参数query，不能用params
views/Home.vue
bash
欢迎{{$route.query.user}}也要用query接收参数
方法三：this.$router.push({name: 'home', params: {user: this.account}})
需要在路由中配置中声明该路径可以携带参数'/home/:user'
和方法一大差不差，但他的参数不会出现在地址栏中。用path跳转就用query，用name跳转就用params
router/index.js
javascript
const routes = [
{
path: '/home/:user',
name: 'home',
component: () => import('@/views/Home.vue')
}
]path后面接一个参数，声明路由的时候取个名字，name在路由传参的时候用
views/Login.vue
kotlin
this.$router.push({name: 'home', params: {user: this.account}})name的时候就不需要用/了，这里用params这个key来携带参数
views/Home.vue
bash
欢迎{{$route.params.user}}用params接收参数
方法四：this.$router.push({path: '/home', hash: #${this.account}})
参数前面会多一个#
哈希传参
router/index.js
javascript
const routes = [
{
path: '/home',
name: 'home',
component: () => import('@/views/Home.vue')
}
]path不需要传参了
views/Login.vue
javascript
this.$router.push({path: '/home', hash: `#${this.account}`})哈希值前面需要带#
views/Home.vue
python
欢迎{{$route.hash.slice(1)}}不字符串切割前面会有个#
以上是用js实现跳转路由，不用js跳转就用router-linka标签，上面四种方法用的最多的是第二种，query，？拼接在地址栏中，不需在路由文件中申明什么东西
最后
今天主要给大家介绍了element-ui框架的用法以及js路由传参的四种方法，有不懂之处欢迎在评论区留言，如果觉得文章对你学习有所帮助，还请"点赞+评论+收藏"一键三连，感谢支持！
本人github学习仓库github
