使用Vue CLI工具创建前端项目并安装常用组件

邬友樵
2023-12-01


前言

提示:这里可以添加本文要记录的大概内容:

很多学习后端的同志,对于前端框架及创建视图可谓绞尽脑汁,本文介绍了如何使用Vue脚手架快速便捷的创建前端项目。


提示:以下是本篇文章正文内容,下面案例可供参考

一、Vue CLI是什么

Vue CLI是Vue官方推出的一个脚手架客户端工具,使用它可以快速的构建一个基于Vue的单页面应用。

二、使用步骤

1.安装Node.js

下载 https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v16.14.2/node-v16.14.2-x64.msi 并安装,安装过程中没有特殊选项。

安装完成后,可以在命令提示符窗口或终端中执行npm -v检查是否安装成功:

npm -v

安装Node.js的主要目的就是为了使用npm

npm = Node Package Manager

在使用npm之前,需要先将npm源配置为国内的某个npm源服务器

npm config set registry https://registry.npm.taobao.org

设置后,还可以通过get命令查看npm源:

npm config get registry

注意:以上命令并不能检查你的配置值是否正确!

2.安装Vue CLI

需要安装Vue CLI以后,才可以通过它的命令来创建Vue CLI项目、启动项目等。

当安装了npm并配置npm源之后,安装Vue CLI的命令是:

npm install -g @vue/cli

安装过程中没有出现Error字样即为成功

安装过程中出现Error字样即为失败,可以:

  • 先通过npm config get registry检查npm源是否是:https://registry.npm.taobao.org/
  • 重新执行以上安装Vue CLI命令
  • 不要在Power Shell下执行命令(命令提示符前面为PS字样)
  • 如果使用Mac OS(苹果操作系统),建议在命令前添加sudo 以使用管理员权限来执行命令

如果安装过程中卡住长时间没有反应,可以按下Ctrl + C强制终止,然后再次执行命令进行尝试。

当安装完成之后,可以使用vue -V来查看Vue CLI版本,也可以用于检验刚才的安装是否成功:

vue -V

三、创建Vue CLI项目

通常,应该创建某个文件夹,用于存放项目,例如在D盘下创建Vue-Workspace文件夹,然后,在命令提示符窗口中进入此文件夹:

D:

cd D:\Vue-Workspace

接下,通过vue create 项目名称命令来创建Vue CLI项目:

vue create jsd2204-csmall-web-client-teacher

注意:敲完以后命令之后只能按1下回车键,即使卡住了,也不要反复按回车!

注意:如果接下来的操作过程中选错,按下Ctrl + C强制终止,再重新创建项目。

按1下回车后,稍微等待一会,会出现创建项目时的选项,需要选择:

上下键选择
Manually select features
依次选:(空格确认/取消)
Babel
Vuex
Router
2.x
直接回车
In package.json
直接回车

最后,看到Successfully created project jsd2204-csmall-web-client-teacher字样,即表示创建成功

1.启动项目

通过IntelliJ IDEA打开项目,在IntelliJ IDEA的Terminal窗口中执行:

npm run serve

执行以上命令即可启动项目,启动成功后,即可看提示:

App running at:
  - Local:   http://localhost:8080/

打开浏览器,通过 http://localhost:8080/ 网址进行访问,即可看到默认的页面。

关于占用端口:通过npm run serve启动的Vue CLI会默认尝试占用8080端口,如果尝试占用的端口号已经被其它进程占用,则会自动顺延一位,即尝试占用8081端口,如果仍被占用,会继续顺延……

也可以显式的指定某个端口号,在package.json中修改scriptsserve属性,例如配置为:

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

则当前项目启动时会占用8888端口。

2.停止服务

当项目启动后,在提示了启动成功的端口窗口中,按下Ctrl + C即可停止服务。

提示:有时按下Ctrl + C后没有响应,可能反复多按几次,或按了Ctrl + C后回车。

提示:其实,只要按下了Ctrl + C,当前服务就已经停止了,后续可能出现终止批处理操作吗(Y/N)?提示,无论选择Y还是N,都无所谓。

3.Vue CLI项目结构

  • package.json:相当于Maven项目中的pom.xml文件,主要配置了当前项目的依赖项,如果不太熟悉此文件,不建议手动修改
  • package-lock.json:此文件是自动生成的,不建议手动修改
  • [node_modules]:当前项目中各依赖项对应的源文件,通常,此文件夹的内容较多,且共享项目时,通常不会包含此文件夹,例如GIT仓库中的项目文件通常不包含此文件夹的内容,执行npm install命令将根据package.json下载相关的依赖项到此文件夹中
  • [src/views]:是建议的存放.vue视图文件的文件夹
  • [src/router/index.js]:是项目的路由配置文件,它配置了各路径与.vue视图组件的对应关系
  • public/index.html:项目中唯一的HTML文件,其内部在页面设计中添加了<div id="app"></div>标签
  • src/App.vue:项目中默认的视图文件,是被index.html显示的

4.关于.vue视图文件

是Vue CLI中用于设计页面的源文件,可以此文件中设计页面的元素、CSS样式、JavaScript。

此文件可以有3个根节点(元素):

  • <template>:在其内部设计页面元素,且此节点(元素)必须有且仅有1个直接子节点(元素),通常,会在<template>下添加<div>,然后,在<div>内部再设计页面
  • <style>:在其内部配置CSS样式
  • <script>:在其内部编写JavaScript程序

提示:根据页面设计,某些.vue文件可能没有<style>,或可能没有<script>

5.关于路由配置

src/router/index.js中,使用了routes数组常量配置路由,主要是配置了各路径与视图组件的对应关系,所以,在数组中的各个元素值就是一个个的路由对象,每个路由对象至少要配置pathcomponent这2个属性。

提示:在路由对象中,name属性不是必须的。

关于component属性,有2种配置方式,第1种是默认导入的,通常会在当前文件的顶部使用import语句导入并命名,然后,此component属性的值就是导入时取的名字,第2种是使用箭头函数import导入的,通常,在各项目中,只会有1个是默认导入的。

6.关于router-view

.vue文件中,可以添加<router-view/>,此标签本身是没有显示效果的,它表示“此处将由另一个视图组件来完成显示,且,到底由哪个视图组件来显示,取决于路由配置与当前访问的URL”。

7.嵌套路由

在开发实践中,必然存在某些页面是完全没有相同之处的,所以,通常,在App.vue的设计中,只保留一个<router-view/>,所以,具体的显示都由各个.vue文件来决定,默认并没有共同(复用)的部分!但是,也一定存在多个页面之间存在共同的部分,所以,在某个.vue中可能还需要再加一个<router-view/>,像这种本身显示在App.vue中的<router-view/>位置、自身内部也包含<router-view/>的,称之为“嵌套路由”。
一旦使用了嵌套路由,必须有某个View是不完整的(其内部有某个区域使用了<router-view/>,是由其它View来负责显示的),这样的View不应该能够被直接访问,所以,通常会配置上redirect属性,表示“重定向”的意思,一旦访问这个View对应的路径,就会自动跳转到重定向配置的路径上,例如:

const routes = [
    {
        path: '/sys-admin',
        component: () => import('../views/HomeView.vue'),
        redirect: '/sys-admin/index',  // 重定向
        
        // 其它代码

另外,在使用了嵌套路由时,通常,设计的子级路由中的URL会有共同的前缀,则,在配置子级路径的path时,可以不使用/作为第1个字符,然后,配置值只需要写/sys-admin右侧的部分,例如:

const routes = [
    {
        path: '/sys-admin',
        component: () => import('../views/HomeView.vue'),
        redirect: '/sys-admin/index',
        children: [
            {
        		// 实际路径是父级路由的path与当前path的组合:/sys-admin/temp/brand/list
                path: 'temp/brand/list',
                component: () => import('../views/sys-admin/temp/BrandListView.vue')
            },
            {
                // 实际路径是父级路由的path与当前path的组合:/sys-admin/temp/brand/add-new
                path: 'temp/brand/add-new',
                component: () => import('../views/sys-admin/temp/BrandAddNewView.vue')
            },

四、 在Vue CLI中使用Element UI

在终端中,需要先安装Element UI(本质上是下载Element UI相关的文件到本项目的node_modules中)。

必须保证当前命令提示符是当前项目下(与执行npm run serve等命令的位置相同,必须保证当前位置下有package.json文件)!

安装的命令是:

npm i element-ui -S

注意:以上命令最后的S是大写的!

安装完成后,需要在src/main.js中进行配置:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

在使用Element UI中的<el-menu>菜单时,可以在菜单上添加router属性,然后,各菜单项的index属性可配置为路径值,则点击菜单项时将跳转到此路径,例如:

<el-menu
      router
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#9ed3d7"
      text-color="#fff"
      active-text-color="#fff">
    <el-menu-item index="/sys-admin/index">
      <i class="el-icon-s-home"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <!-- 剩余其它代码 -->

五、使用Axios

在Vue CLI中,在使用Axios之前,需要先安装:

npm i axios -S

安装完成后,需要在main.js中添加配置:

import axios from 'axios';
Vue.prototype.axios = axios;

当使用Axios向其它远程服务器提交异步请求时,可能会出现CORS错误,即“跨域”的错误。

Access to XMLHttpRequest at 'http://localhost:8080/login' from origin 'http://localhost:8888' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决办法详见SpringMVC框架

在Vue CLI项目中,当使用Axios时,需要使用this来引用axios,并且,在then()内部,只能使用箭头函数,不写使用匿名function函数,例如:

this.axios.post(url, this.ruleForm).then((response) => {
    console.log('服务器端响应的结果:' + response);
    console.log(response);
    if (response.data == 1) {
      console.log('登录成功');
      this.$message({
        message: '登录成功!',
        type: 'success'
      });
    } else if (response.data == 2) {
      console.log('登录失败,用户名错误!');
      this.$notify.error({
        title: '登录失败',
        message: '用户名不存在!'
      });
    } else {
      console.log('登录失败,密码错误!');
      this.$notify.error({
        title: '登录失败',
        message: '密码错误!'
      });
    }
  });

六、使用qs

qs是一个可以将JavaScript中的对象(与JSON格式相同)转换为FormData格式的框架!
在Vue CLI中,在使用qs之前,需要先安装:

npm i qs -S

安装完成后,需要在main.js中添加配置:

import qs from 'qs';
Vue.prototype.qs = qs;

接下来,在项目的任何视图组件中,都可以通过this.qs来使用此对象。

在提交请求之前,可以使用qs将JavaScript对象转换为FormData字符串,例如:

let formData = this.qs.stringify(this.ruleForm);

当提交对象包含数组数据时,需要将数组转换格式,例如:

 let formData = this.qs.stringify(this.ruleForm, {'arrayFormat': 'repeat'});

七、使用富文本编辑器

在Vue CLI中,在使用富文本编辑器之前,需要先安装:

npm i wangeditor -S

安装完成后,需要在main.js中添加配置:

import wangEditor from 'wangeditor';
Vue.prototype.wangEditor = wangEditor;

七、使用Vant

Vant 是一个轻量、可靠的移动端组件库
在Vue CLI中,在使用Vant之前,需要先安装:

npm i vant -S

安装完成后,需要在main.js中添加配置:

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

最后main.js中导包和应用组件如下:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios';
import qs from 'qs';
import wangEditor from 'wangeditor';
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.prototype.axios = axios;
Vue.prototype.qs = qs;
Vue.prototype.wangEditor = wangEditor;
Vue.use(ElementUI);
Vue.use(Vant);
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

总结

提示:这里对文章进行总结:

例如:以上就是今天要讲的内容,本文介绍了如何使用Vue CLI工具创建前端项目,以及在项目中引入前端常用的一些组件。如有帮助,请不吝点赞关注支持一下

 类似资料: