一、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>

运行效果:

运行vue效果

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: '添加轮播图'}
    }
  ]
}

效果展示:

添加轮播图效果展示

最后修改:2023 年 09 月 19 日
如果觉得我的文章对你有用,请随意赞赏