一、Vue CLI入门
1、Vue CLI 基础
(1)单页面应用SPA
所有的内容写在一个页面当中,通过点击事件更改页面中显示的内容,主要通过ajax等操作动态更新页面信息。
SPA 的优点包括:
- 用户体验好:SPA 可以快速响应用户的操作,无需重新加载整个页面,因此可以提供更快的加载速度和更流畅的用户体验。
- 减轻服务器负担:由于 SPA 可以通过 AJAX 技术从服务器加载必要的数据,所以可以减轻服务器的负担,提高网站的性能。
- 开发效率高:SPA 通常使用现代的前端框架,例如 React、Angular 和 Vue.js 等,这些框架提供了丰富的工具和组件,可以帮助开发人员更高效地构建应用程序。
SPA 的缺点包括:
- 首次加载时间长:由于 SPA 需要在加载页面时加载所有的必要资源,因此首次加载时间可能会比较长,特别是对于较大的应用程序。
- SEO 不友好:由于 SPA 中的所有内容都是动态生成的,搜索引擎可能无法正确地读取和索引内容,从而影响网站的排名。
- 对于较大的应用程序,可能会导致内存泄漏和性能问题,需要开发人员进行额外的优化和调试。
(2)什么是Vue CLI
Vue CLI俗称vue脚手架,可以快速的搭建页面。内部有很多插件和工具,主要做前端,用于构建复杂的Vue.js应用程序
(3)Node.js和npm
Node.js是Vue.js、Vue CLI和许多其他JavaScript框架和工具的运行环境。
npm是命令集,可以用于构建和打包应用程序
设置npm源
npm切换国内淘宝镜像:
npm config set registry https://registry.npmmirror.com
检查npm源是否切换成功:
npm config get registry
(4)Vue CLI安装和使用
安装Vue CLI:
npm install -g @vue/cli
检查安装:
vue --version
安装成功显示:
@vue/cli 5.0.8
使用vue命令创建项目:
vue create my-project
运行项目:
npm run serve
知道即可,现在都是用idea进行自动配置。
2、Vue CLI项目
(1)目录结构
- [.idea]:不是VUE Cli项目特有的,只要是使用IntelliJ IDEA打开的项目均会自动生成此文件夹,是IntelliJ IDEA管理项目时使用到的文件,不需要人为维护,如果此文件夹内报错,删除此文件夹即可
- [node_modules]:用于存储当前项目的各依赖项的文件夹,不需要人为维护,通常,此文件夹的内容不会被提交到GIT仓库(被配置到.gitignore文件中),所以,从GIT仓库拉取到的项目也不会有此文件夹及文件夹中的内容,需要在当前项目文件夹下执行npm install命令,会自动下载此项目所需的所有依赖项
- [public]:静态资源文件夹,用于存放.html、.css、.js、图片等静态资源文件,此文件夹对应运行时的根路径;其中,favicon.ico表示网站的图标文件,是固定的位置、固定的文件名;index.html是项目中的唯一的.html文件,也是默认使用的网页文件
- [src]:源代码和源文件的文件夹
- .gitignore:配置不需要提交到GIT仓库的文件和文件夹
- bable.config.js:Bable的配置文件
- LICENSE:并不是每个项目都有的文件,通常是在GIT仓库设置开源后配置的《开源许可协议》文件
- package.json:项目的基础配置文件,包括:相关脚本、项目的依赖项等等
- package-lock.json:锁定的配置文件,不需要人为维护
- README.md:并不是必须的文件,是默认的项目描述文件,项目的开发者应该通过此文件对项目进行基本的介绍,并包括项目如何启动、如何部署等
- vue.config.js:Vue的配置文件
(2)src的目录和文件作用
- [assets]:存放静态资源的文件夹,此文件夹下的内容被访问时,应该是固定不变的(不会随着程序运行而变化)
- [components]:存放视图组件的文件夹,此文件夹下的视图组件通常不会被配置路由,且被其它视图组件引用(例如在默认的项目代码中HelloWorld.vue被HomeView.vue引用)
- [router]:存放路由配置的文件夹
- router/index.js:默认的路由配置文件
- [store]:存放定义全局的量的文件的文件夹
- store/index.js:默认的定义全局的量的文件
- [views]:存放视图组件的文件夹
- App.vue:默认会注入到index.html中的视图组件
- main.js:项目的主配置文件
二、单页面应用开发
1、组件开发
组件基本概念
组件就是别人已经写好的,拿来就可以直接用,组件包括文本、图像、表格、表单等元素。
在 Vue.js 2.0 中,组件通常是以 .vue 文件扩展名来命名的。
创建vue
<template>
<div class="hello">
<h1>{{message}}</h1>
</div>
</template>
<script>
export default {
name: "Hello VUE",
props: {
message: String
}
}
</script>
<style scoped>
.hello h1{
color: red;
}
</style>
main.js中创建组件:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//从components目录下导入Hello.vue
import Hello from "./components/Hello"
//注册Hello组件
Vue.component("hello-vue", Hello)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
App.vue中使用组件:
<template>
<div id="app">
<!--使用在main.js注册的组件-->
<hello-vue message="Hello VUE"></hello-vue>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
运行效果:
2、Vue Router
vue.js的路由管理器,用于寻找各种组件。可以实现页面间的无刷新的跳转和数据共享,提高用户体验。
功能主要有:
- 路由映射:将 URL 映射到对应的组件或页面
- 路由参数:支持动态路由参数,可以根据参数加载对应的组件或页面
- 嵌套路由:支持嵌套路由,可以实现组件之间的层级嵌套
- 路由钩子:支持全局路由钩子和组件级别路由钩子,可以控制路由的访问权限、实现异步数据加载等功能
- 命名路由:可以为路由配置名称,方便在代码中跳转路由
- 导航守卫:可以监听路由的变化,并根据需要进行拦截和重定向
基于路由的跳转示例:
在views文件夹下创建HomeView.vue
<template>
<div class="home">
<h1>网站首页</h1>
</div>
</template>
<script>
</script>
<style>
.home h1{
color: red;
}
</style>
在views文件夹下创建ContactView.vue
<template>
<div class="contact">
<h1>我们的联系方式</h1>
</div>
</template>
<script>
</script>
<style scoped>
.contact h1{
color: blueviolet;
}
</style>
在views文件夹下创建SystemView.vue
<template>
<div class="system">
<h1>系统配置中心</h1>
</div>
</template>
<script>
</script>
<style scoped>
.system h1 {
color: chocolate;
}
</style>
在router下的index.js中添加路由:
import Vue from 'vue'
//导入路由组件
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import ContactView from '../views/ContactView'
import SystemView from '@/views/SystemView'
//注册路由
Vue.use(VueRouter)
//定义路由
const routes = [
{
path: '/home',
name: 'HomeView',
component: HomeView
},
{
path: '/contact',
name: 'ContactView',
component: ContactView
}, {
path: '/system',
name: 'SystemView',
component: SystemView
}
]
//创建路由实例
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
//导出路由
export default router
更改App.vue中的路由配置:
<template>
<div id="app">
<nav>
<router-link to="/home">首页</router-link> |
<router-link to="/contact">联系我们</router-link> |
<router-link to="/system">系统配置</router-link>
</nav>
<router-view/>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
(1)路由的跳转方式
声明是导航(以上就是)、编程式导航(js中调用Vue Router实例的方法)一般和事件绑定在一起
编程式导航示例:
在contactView中编写编程式导航
<template>
<div class="contact">
<h1>我们的联系方式</h1>
<!--编程式路由导航-->
<button @click="$router.push('/home')">返回首页</button>
</div>
</template>
<script>
</script>
<style scoped>
.contact h1{
color: blueviolet;
}
</style>
编程式路由导航效果:
(2)嵌套路由
路由中还有路由,在一个页面组件中,有多个子页面,并且每个子页面组件都需要根据不同的路径展示不同的内容。
嵌套路由示例:
点击首页,首页分为三个组件,分别有不同的内容
创建A.vue
<template>
<div class="a">
<h1>A</h1>
</div>
</template>
<script>
export default {
name: "AView"
}
</script>
<style scoped>
.a h1 {
color: chocolate;
}
</style>
创建B.vue
<template>
<div class="b">
<h1>B</h1>
</div>
</template>
<script>
export default {
name: "BView"
}
</script>
<style scoped>
.b h1{
color: #000;
}
</style>
创建C.vue
<template>
<div class="c">
<h1>C</h1>
</div>
</template>
<script>
export default {
name: "CView"
}
</script>
<style scoped>
.c h1{
color: brown;
}
</style>
在router文件的index中为home路由再定义三个子路由:
import Vue from 'vue'
//导入路由组件
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import ContactView from '../views/ContactView'
import SystemView from '@/views/SystemView'
import A from '../views/A'
import B from '../views/B'
import C from '../views/C'
//注册路由
Vue.use(VueRouter)
//定义路由
const routes = [
{
path: '/home',
name: 'HomeView',
component: HomeView,
children: [
//声明定义二级路由
{
path: 'a',
name: "AView",
component: A
},
{
path: 'b',
name: "BView",
component: B
},
{
path: 'c',
name: "CView",
component: C
}
]
},
{
path: '/contact',
name: 'ContactView',
component: ContactView
}, {
path: '/system',
name: 'SystemView',
component: SystemView
}
]
//创建路由实例
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
在home中添加路由:
<template>
<div class="home">
<h1>网站首页</h1>
<nav>
<!--声明式路由:使用router-link标签来导航-->
<router-link to="/home/a">A页面</router-link> |
<router-link to="/home/b">B页面</router-link> |
<router-link to="/home/c">C页面</router-link>
</nav>
<!-- 显示路由组件 -->
<router-view/>
</div>
</template>
<script>
</script>
<style>
.home h1{
color: red;
}
</style>
嵌套路由效果:
三、vue-element-admin
就是做酷鲨商城后台的主页
vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助用户快速搭建企业级中后台产品原型。
官网地址:https://panjiachen.github.io/vue-element-admin-site/zh/
1、下载安装vue-admin-template
(1)克隆项目
git clone https://gitee.com/panjiachen/vue-admin-template.git
(2)安装依赖
vue脚手架项目,每次创建项目都要安装一次依赖。
npm install
(3)本地开发 启动项目
npm run dev
运行效果:
(4)修改后台管理页面
案例整体实现步骤为:
- 将课前资料中的图片素材imgs复制到 public 文件夹。
- 开发轮播图列表页面对应的Vue组件。
- 配置轮播图列表页面的路由。
- 开发添加轮播图页面对应的Vue组件。
- 配置添加轮播图页面的路由。
开发轮播图列表页面对应的Vue组件:
<template>
<div style="padding: 30px">
<el-table :data="bannerArr" style="width: 90%">
<el-table-column prop="id" label="编号" width="100"/>
<el-table-column label="轮播图" width="300">
<template slot-scope="scope">
<img :src="scope.row.url" width="100%">
</template>
</el-table-column>
<el-table-column prop="sort" label="排序" width="100"/>
<el-table-column label="操作">
<el-button type="danger" size="mini">编辑</el-button>
<el-button type="danger" size="mini">删除</el-button>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'index',
data: {
bannerArr: [
{ id: 1, url: '/imgs/b1.jpg', sort: 1 },
{ id: 2, url: '/imgs/b2.jpg', sort: 2 },
{ id: 3, url: '/imgs/b3.jpg', sort: 3 }
]
}
}
</script>
<style scoped>
</style>
配置轮播图列表页面的路由:
在router/index.js中进行路由配置
{
path: '/banner', //路由地址
component: Layout, //页面布局
name: 'Banner',
meta: { title: '轮播图管理', icon: 'el-icon-s-help' }, //路由信息
children: [ //配置嵌套路由
{
path: 'list', //二级路由地址
name: 'List',
//二级路由组件 文件来自 src/views/banner/list/index.vue 默认就是index.vue
component: () => import('@/views/banner/list'),
meta: { title: '轮播图列表'}
},
{
path: 'tree',
name: 'Tree',
component: () => import('@/views/banner/list'),
meta: { title: '添加轮播图'}
}
]
},
轮播图效果展示:
开发添加轮播图页面对应的Vue组件:
<template>
<div style="padding: 30px">
<el-form label-width="100px">
<el-form-item label="轮播图图片">
<el-upload name="imageFile" action="/upload/images" list-type="picture-card">
<i class="el-icon-plus"/>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过1000kb</div>
</el-upload>
</el-form-item>
<el-row>
<el-col :span="8">
<el-form-item label="排序">
<el-input v-model="banner.sort" type="number" placeholder="请输入排序"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary">添加</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {
banner: {
url: '',
sort: ''
}
}
}
}
</script>
<style scoped>
</style>
配置添加轮播图页面的路由:
{
path: '/banner',
component: Layout,
name: 'Banner',
meta: { title: '轮播图管理', icon: 'el-icon-s-help' },
children: [ //配置嵌套路由
{
path: 'list',
name: 'List',
component: () => import('@/views/banner/list'),
meta: { title: '轮播图列表'}
},
{
path: 'add',
name: 'Add',
component: () => import('@/views/banner/add/index'),
meta: { title: '添加轮播图'}
}
]
}
效果展示: