关于Vue的小见解

know what one is about

已于 2023-11-25 14:14:39 修改

阅读量140

点赞数 6

文章标签： vue.js 前端 javascript

于 2023-11-20 18:50:02 首次发布

本文链接：https://blog.csdn.net/weixin_47027760/article/details/134503082

版权

一、概述

1.1 Vue.js

Vue.js 是一套构建用户界面的渐进式框架；Vue.js是完成版的Vue，包含：核心功能+模板解析器。

此框架基于MVVM设计模式--- 前端MVVM设计模式

M: Model 模型, 指数据模型前端的数据一般都来自于服务器
V: View 视图, 指页面相关代码
VM: ViewModel 视图模型, 负责将页面中可能发生改变的元素和数据进行绑定,并且会一直监听数据的改变,当数据发生改变时从内存中找到和数据对应的元素然后再进行改动,避免了频繁DOM操作带来的资源浪费,从而提高了执行效率

VUE相关指令

{{变量}}: 插值, 让此处的文本内容和变量进行绑定
v-text: 让某个元素的文本内容和变量进行绑定
v-html: 让某个元素的文本或标签内容和变量进行绑定
v-bind: 属性名=变量, 让元素的某个属性的值和变量进行绑定 , v-bind可以省略
v-model=变量, 双向绑定: 变量会影响页面, 页面也会影响变量
v-on:事件名="方法", 事件绑定, 事件触发的方法需要写在methods里面, 简写: @事件名 ="方法"
v-for="变量 in 数组"; 循环遍历, 遍历的过程中会生成当前元素以及子元素

显示隐藏相关指令

v-if="变量"; 让元素是否显示和变量进行绑定,true显示 false 删除元素
v-else; 让元素是否显示和上面元素v-if的状态相反
v-show="变量"; 让元素是否显示和变量进行绑定, true显示, false 隐藏

1.2 VUE Cli

VUE Cli 通常称为“VUE脚手架”，是由VUE官方提供的客户端（client），它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的引用程序而且可用于自动生成vue和webpack的工程模板。

1.2.1 单页面

（1）在工程中只有1个HTML页面，可以随时使用新的内容替换原有的内容，并且，还可以使得URL一并更新，从用户体验上来看，这种单页面应用与传统的前端应用并没有什么不同。

（2）每个页面可以由多个部分组成，每个部分都可以按需替换。

（3）局部替换的做法，反向实现了页面中某些区域的“复用”。

二、使用 VUE Cli开发项目

2.1 使用前准备

（1）在电脑上安装Node.js，并配置环境变量。

（2）在电脑上配置npm源，使得它可以更快速、更稳定的下载所需的软件。---npm config set registry https://registry.npm.taobao.org

执行以上命令默认没有任何反馈，可以通过以下命令查看配置的值：npm config get registry

（3）在电脑上安装VUE Cli。----npm install -g @vue/cli

2.2 创建工程

2.2.1 创建工程

命令：vue create 工程名称

输入以上指令后，按下 Enter 键将准备创建工程，创建过程可能耗时较长，注意：不可反复按 Enter

键，否则会自动选择后续各设置选项的默认项。

注意：如果创建项目的过程中选择错误，可以通过按下CTRL + C终止，并重新创建！

在创建选项中，需要选择”

Manually select features：手动选择功能

Babel / Vuex / Router

2.x

In package.json

接下来，会自动完成项目的创建，在创建结束后，如果信息中没有错误，且出现了Successfully created project 项目名称.的字样，则创建成功！

如果创建项目失败，应该先删除已经创建的项目的文件夹，然后检查npm源，确认无误后，再次执行vue create 项目名称命令来重新创建项目。

2.3 启动项目

当项目创建成功后，可以通过IntelliJ IDEA打开此项目。

在IntelliJ IDEA中，打开Terminal窗口，默认的提示符的位置应该就是当前项目的文件夹，在此处执行命令即可启动项目：

npm run serve
当启动成功后，可以看到Compiled successfully in 7859ms字样。

提示：启动成功后，会提示访问此项目的URL，例如：http://localhost:8080，根据当前计算机的网络配置不同，接下来的其它URL提示可能不同，均可无视。

在浏览器中，可以通过http://localhost:8080来访问此项目。

2.4 VUE Cli 文件结构

[.idea]：任何使用IntelliJ IDEA打开过的项目都会有此文件夹，是由IntelliJ IDEA自动生成的，记录了IntelliJ IDEA管理此项目时用到的文件，如果此文件夹如现错误，删除即可，后续会自动再次生成
[node_modules]：当前项目使用到的依赖项的文件夹，不要手动管理此文件夹中的内容，如果项目中缺失此文件夹，或此文件夹中的部分必要内容，项目将无法启动，或无法正确运行，需要在终端窗口中，在当前项目文件夹下执行npm install命令，将自动下载当前项目所需的所有依赖项到此文件夹中
此文件夹通常被配置到.gitignore文件中，所以，使用GIT仓库时，提交代码时此文件夹是不会提交的！同理，从GIT仓库拉取项目到本地时，拉取到的项目也不会包含此文件夹
[public]：静态资源文件夹，用于存放静态资源文件（例如.css、.js、图片等），此文件夹也是整个项目的资源根目录，此文件夹中的内容通过URL的 / 根路径来访问
favicon.ico：图标文件，是固定的文件名，如果你希望使用其它图标，可以使用新图标文件覆盖此文件（仍使用相同的文件名）
index.html：VUE脚手架项目中的唯一的网页文件，通常，不修改默认文件中的内容
[src]：项目的核心源代码文件所在的文件夹
[assets]：静态资源文件夹，此文件夹下的内容被使用时应该是相对固定的，不会随着程序的运行而发生变化的，例如你可以把网站的LOGO图片文件放在这里，但不应该把用户的头像图片放在这里
[components]：用于存放被其它视图组件调用的视图组件的文件夹
[router]：用于配置路由
index.js：默认的路由配置文件
[store]：用于配置全局的一些量
index.js：默认的配置全局的量的文件
[views]：用于存放视图组件的文件夹
App.vue：是默认会注入到index.html的视图组件，不要修改此文件的文件名
main.js：项目的主配置文件，通常，在安装了某些新的依赖项后，可能需要在此文件中添加一些配置
.gitignore：用于配置将哪些文件或文件夹忽略，不会提交到GIT仓库
bable.config.js：Bable的配置文件
jsconfig.json：JavaScript的基础配置文件
LICENSE：并不是VUE脚手架项目的必要文件，此文件是开源声明文件，当你的项目提交到GIT仓库并且设置为公开项目时，需要添加此文件
package.json：此项目的配置文件，主要配置了执行脚本（scripts属性）、项目的依赖项（dependencies属性）、开发时所需的依赖项（devDependencies属性），在不熟练的情况下，不要手动修改此文件中的内容
package-lock.json：是管理此项目时使用的、基于package.json自动生成的文件
README.md：是默认的项目的介绍文件，当你的项目提交到GIT仓库，大部分GIT仓库服务器都会你的项目的首页显示此文件的内容，当你需要编写此文件时，应该明确写出：此项目应该如何打开、如果启动、如果部署，及相关的注意事项等
vue.config.js：Vue的基础配置文件

2.5 VUE脚手架项目视图组件

在VUE脚手架项目中，视图组件表现为：使用.vue作为扩展名的文件。

默认的视图文件（页面文件）在src/views文件夹中。默认的项目中，负责显示的是：

src/App.vue
src/views/AboutView.vue
src/views/HomeView.vue
src/components/HelloWorld.vue

每个视图文件都是以.vue作为扩展名的，视图组件主要由3大部分组成，对应3个根级标签：

<template>：用于设计页面的元素，其子级可以编写设计页面的相关代码，例如HTML源代码，或使用了VUE后的一些标签，或添加了Element UI后，也可以使用Element UI的标签，需要注意：此标签的直接子标签只能有1个（通常是<div>标签），否则将无法通过编译！
<style>：用于设计样式，即编写CSS相关代码
<script>：用于编写程序代码，即编写JavaScript相关代码

**提示：**推荐在IntelliJ IDEA中安装Vue.js插件，在编写视图组件的源代码时，可以得到更好的编码体验！

2.6关于路由

Vue CLI的“路由”是一种配置了“访问路径”与“视图组件”的对应关系的对象！

路由是通过src/router/index.js文件的routes常量进行配置的，默认的代码是：

const routes = [
{
path: '/about',
name: 'home',
component: HomeView
},
{
path: '/',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AdminIndexView.vue')
}
]
以上routes常量的类型是数组，数组的元素是一个个的对象，以上代码中各对象配置了：

path：访问路径
name：名称，并不是必须的
component：视图组件，配置此属性时，视图组件有2种加载模式，分别是“预加载”和“懒加载”，其中，预加载需要通过当前文件顶部的import语句导入视图，而懒加载则是直接配置此属性时，直接使用箭头函数加上import函数进行配置即可，通常，在每个项目中，应该有且仅有1个视图是预加载的

2.6.1关于component的配置，

有2种做法，第1种是使用import语句来导入：

import LoginView from '../views/LoginView.vue'

const routes = [

{
    path: '/',
    component: LoginView
  },
]

另一种是使用import()函数来导入：

{
  path: '/home',
  component: () => import( '../views/HomeView.vue'),}

2.6.2 关于嵌套路由

<router-view>
在设计视图时，使用<router-view>则表示：当前视图文件（例如默认的App.vue）不处理此部分的显示，将根据访问路径来决定由哪个视图进行显示（取决于src/router/index.js中routes常量的配置）！例如：

<template>
  <div id="app">
    <!-- router-view部分将由其他视图组件来完成显示 -->
    <!-- 具体取决于路由配置及访问-->
    <router-view/>
  </div>
</template>

一旦出现了<router-view/>的嵌套，在配置子级<router-view/>的显示的视图组件时，就需要配置嵌套路由！

子级路由的配置，需要在父级路由对象上添加children的属性，例如，HomeView.vue使用了<router-view/>，就在HomeView.vue对应的路由对象上添加children属性，此属性的类型、配置方式与routes常量相同！例如：

const routes = [
  {
    path: '/home',
    component: () => import( '../views/HomeView.vue'),
    children:[
      {
        path:'/brand-list',
        component:() => import('../views/sys-admin/product/BrandListView.vue')
      },
}

另外，配置了children的视图组件都是使用了<router-view/>的，也就说明这个视图组件是不完整的（某些区域需要使用其它视图组件来显示）！这种视图组件应该不允许直接显示，所以，还应该在此视图组件的路由配置上添加redirect属性，表示“重定向”，即：访问此视图组件时，直接重定向（可以理解为：跳转页面）到另一个视图组件。

const routes = [
  {
    path: '/',
    component: HomeView,
    redirect: '/sys-admin/index', // 重定向
    children: [
      {
        path: '/sys-admin/index',
        component: () => import('../views/sys-admin/SystemAdminIndex.vue')
      },
}

2.7 Vue CLI项目的启动端口

Vue CLI项目在启动时，默认将尝试占用8080端口，如果此端口已经被占用，则会顺延后一位端口号，即尝试占用8081……当然，如果8081也被占用，则会继续顺延至8082，以此类推。

建议为Vue CLI项目显式的指定端口，避免发生冲突，或多次启动时的端口号不一致。需要在package.json，原本有（通常在第6行）：

"serve": "vue-cli-service serve",
在以上属性值的末尾添加--port 端口号，例如：

"serve": "vue-cli-service serve --port 8888",

三、Vue UI组件库

3.1 PC端常用UI组件库

1、 Element UI https://element.eleme.cn

2、IView UI https://www.iviewui.com

3.2 组件库安装

首先，在终端窗口中，在当前项目的文件夹下，执行安装命令：

npm i element-ui -S
经过以上操作后，会下载element ui相关的文件到本项目的node_modules文件夹中！

接下来，需要在项目的主配置文件（src/main.js）中添加配置：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

至此，完成了Element UI的安装与配置，则在当前项目中的任何视图组件中，可以直接使用Element UI进行设计！

以上安装与配置，对于每个VUE脚手架项目都是一次性操作。

**注意：**当你再次拉取其他人的项目时，需要在他的项目文件夹下执行npm install安装命令。

3.3 Element UI的菜单与路由

在VUE脚手架项目中，使用Element UI的菜单时，在<el-menu>标签上，添加router属性，即可实现根据index跳转URL，例如：

<el-menu
    router
    :default-active="activeMenuItemPath"
    class="el-menu-vertical-demo"
    background-color="#222"
    text-color="#fff"
    active-text-color="#fff">

在每个<el-menu-item>上配置index属性，且属性值就是此菜单项对应的视图的URL，例如：

<el-menu-item index="/sys-admin/index">
  <i class="el-icon-s-home"></i>
  <span>首页</span>
</el-menu-item>

注意：关于router属性：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转。如果手动修改浏览器的地址栏中的URL（包括刷新页面），视图的显示一般是没有问题的，但是，默认激活的菜单项可能不是你想要的！

在<el-menu>标签上，有default-active属性，表示默认激活的菜单项，应该将此属性配置为当前显示的视图的URL，则配置为：

<el-menu
    router
    :default-active="activeMenuItemPath"
    class="el-menu-vertical-demo"

四、在VUE脚手架项目安装axios

（1）需要安装axios：

npm i axios -S
（2）需要在main.js中导入，并声明为Vue对象的成员：

import axios from 'axios';

Vue.prototype.axios = axios;
（3）使用axios发请求并处理响应的代码示例：

this.axios.post(url, this.form).then((response) => {
  console.log('服务器端的响应：');
  console.log(response);
  let responseBody = response.data;
  if (responseBody == 1) {
    // 登录成功
    this.$message({
      message: '登录成功！（暂不跳转）',
      type: 'success'
    });

注意：在then()内部，必须使用箭头函数（() => {}），不可以使用一般的function函数！