Vue CLI配置与安装

一、关于Vue CLI

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

安装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

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

安装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字样，即表示创建成功。

启动项目

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

npm run serve

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

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

提示：可能某些电脑上会显示多个网址，这并不重要。

打开浏览器，通过 http://localhost:8080/ 网址进行访问，即可看到默认的页面。
提示：可能某些电脑上会显示多个网址，这并不重要。

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

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

也可以显式的指定某个端口号，在package.json中修改scripts的serve属性，例如配置为：

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

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

停止服务

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

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

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

重启服务

没有此功能

二、 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显示的

关于.vue视图文件

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

此文件可以有3个根节点（元素）：

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

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

关于路由配置

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

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

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

关于router-view

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

嵌套路由

在开发实践中，必然存在某些页面是完全没有相同之处的，所以，通常，在App.vue的设计中，只保留一个<router-view/>，所以，具体的显示都由各个.vue文件来决定，默认并没有共同（复用）的部分！但是，也一定存在多个页面之间存在共同的部分，所以，在某个.vue中可能还需要再加一个<router-view/>，像这种本身显示在App.vue中的<router-view/>位置、自身内部也包含<router-view/>的，称之为“嵌套路由”。

在src/router/index.js中，如果某个视图有<router-view/>，在配置时，应该通过children属性配置子级路由（被嵌套的那层路由），此children属性的写法与根级的routes完全相同，例如：

const routes = [
    {
        path: '/home',
        component: () => import('../views/HomeView.vue'),
        children: [
            {
                path: '/brand-list',
                component: () => import('../views/BrandListView.vue')
            },
            {
                path: '/brand-add-new',
                component: () => import('../views/BrandAddNewView.vue')
            }
        ]
    },
        
    // 省略其它代码
        
}

一旦使用了嵌套路由，必须有某个View是不完整的（其内部有某个区域使用了<router-view/>，是由其它View来负责显示的），这样的View不应该能够被直接访问，所以，通常会配置上redirect属性，表示“重定向”的意思，一旦访问这个View对应的路径，就会自动跳转到重定向配置的路径上，例如：

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

另外，在使用了嵌套路由时，通常，设计的子级路由中的URL会有共同的前缀，例如：

const routes = [
    {
        path: '/sys-admin',
        component: () => import('../views/HomeView.vue'),
        redirect: '/sys-admin/index',
        children: [
            {
        		// 以下路径使用了 /sys-admin 作为前缀
                path: '/sys-admin/temp/brand/list',
                component: () => import('../views/sys-admin/temp/BrandListView.vue')
            },
            {
                // 以下路径使用了 /sys-admin 作为前缀
                path: '/sys-admin/temp/brand/add-new',
                component: () => import('../views/sys-admin/temp/BrandAddNewView.vue')
            },

则，在配置子级路径的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>
    <!-- 剩余其它代码 -->

四、 在Vue中使用富文编辑器

在Vue CLI中，在使用wangeditor之前，需要先安装：

npm i wangeditor 

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

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

在Vue CLI项目中，当使用wangeditor时:

<el-form-item label="商品详情">
        <div id="wangEditor"></div>
</el-form-item>

  methods: {
    initWangEditor() {
      this.editor = new this.wangEditor("#wangEditor");
      this.editor.config.zIndex = 1;
      this.editor.create();
      }
    },

 mounted() {
    console.log('mounted');
    this.initWangEditor();
  }
},

五、在Vue中使用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.

在Spring MVC项目中，当需要允许跨域访问时，需要在Spring MVC项目中自定义配置类，实现WebMvcConfigurer接口，重写其中的addCorsMapping()方法：

@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowCredentials(true)
                .allowedHeaders("*")
                .allowedMethods("*")
                .allowedOriginPatterns("*")
                .maxAge(3600);
    }
    
}

在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: '密码错误！'
      });
    }
  });

六、在Vue CLI中使用qs

在Vue CLI中，在使用qs之前，需要先安装：

qs：查询参数序列化和解析库
什么是qs？qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串，或者反过来将一个查询字符串解析成一个object,帮助我们查询字符串解析和序列化字符串。

npm install qs -S

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

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

七、在Vue CLI中使用Vant

什么是Vant

Vant是一个轻量，可靠的移动端组件库，2017开源

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

Vant的优势

ElementUI是开发计算机浏览器(非移动端)页面的组件库

而Vant是开发移动端页面的组件库

我们设计的酷鲨商城前台项目使用手机\移动设备访问的,所以使用Vant更合适

Vant特性

• 🚀性能极佳，组件平均体积小于 1KB（min+gzip）
• 🚀 65+ 个高质量组件，覆盖移动端主流场景
• 💪 使用 TypeScript 编写，提供完整的类型定义
• 💪 单元测试覆盖率超过 90%，提供稳定性保障
• 📖 提供完善的中英文文档和组## 创建

Vue项目件示例

参考上面-----[创建Vue 项目]----的步骤,创建Vue项目：

例如在D盘下创建vue-home文件夹

进入文件夹,在地址栏输入cmd 打开dos命令行界面

D:\vue-home>vue create demo-vant

参考上面-------[启动项目]

安装Vant支持

我们创建的Vue项目并不会默认就支持Vant

所以,我们需要安装Vant的支持到Vue项目中

在打开的idea界面最下方,找到Terminal点击

在出现的命令行中输入安装Vant的指令

运行安装Vant的npm命令:

F:\vue-home\demo-vant>npm i vant@latest-v2 -S

安装结束后可能有警告,可以忽略

最终可能看到下面的结果

added 5 packages in 4s

到此为止,我们就将Vant运行需要的文件安装在vue项目中的

添加Vant引用

如果想要在项目中使用Vant提供的组件

需要在Vue项目代码中添加Vant的引用

Vue项目的src/main.js文件中,添加引用代码如下

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

Vue.use(Vant)

添加了上面的引用,当前Vue项目就可以使用Vant组件了

为了实时运行项目,我们先启动Vue项目,测试表示它正常运行

可以在idea提供的Terminal界面中编写如下代码

D:\vue-home\demo-vant>npm run serve

打开浏览器

输入localhost:8080

进入移动端页面调试模式

以Google浏览器为例按F12进入调试模式后点击移动端调试即可

按钮组件

在HomeView.vue中修改代码如下

<template>
  <div class="home">
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
  </div>
</template>

打开页面就能看到按钮的样式了

看到这个内容,表示当前Vant组件工作正常

如果没有看到效果

检查Vant组件的安装和引用

表单页面

登录作为移动端非常常见的界面

Vant表单是直接提供模板的,我们可以在官网找到表单链接直接使用

<template>
  <div class="about">
    <!--
      @submit是vant组件提供的Event(事件),在表单提交成功时触发,所以这个名字不能修改
      @failed是vant组件提供的Event(事件),在表单提交失败时触发,这个名字也不能修改
      在事件名称后编写方法名实现调用
      -->
    <van-form @submit="onSubmit" @failed="myFail">
      <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
    myFail(errorInfo){
      // 在表单提交验证失败时运行的方法,errorInfo是错误信息
      console.log(errorInfo);
    }
  },
};
</script>

注意@submit和@failed这两个事件的绑定关系

area省市区选择

先在views文件夹下创建AreaView.vue文件

定义路由设置

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    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/AboutView.vue')
  },
  {
    path: '/area',
    name: 'area',
    component: () => import('../views/AreaView.vue')
  }
]

编写代码如下

<template>
  <div>
    <van-area title="标题" :area-list="areaList" />
  </div>
</template>

<script>
const areaList = {
  province_list: {
    110000: '北京市',
    120000: '天津市',
  },
  city_list: {
    110100: '北京市',
    120100: '天津市',
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    // ....
  },
};

export default {
  data(){
    return {areaList};
  }
}
</script>

通过输入路径http://localhost:8080/area

访问省市区选择页面

只有少量数据

如果想要真实的数据,那么就需要在上面areaList数据中填入大量数据

但是这个工作量很大,个人实现非常困难,所以可以使用业界通用的一个省市区信息数组

先安装全国省市区数据包

D:\vue-home\demo-vant>npm i @vant/area-data

安装结果可能为

added 1 package in 2s

如果该安装成功,就可以添加全国省市区数据到项目中了

AreaView.vue代码中添加如下

<template>
  <div>
    <van-area title="标题" :area-list="areaList" @confirm="showArea" />
  </div>
</template>

<script>
// 从全国省市区数据包中提取数据,命名为areaList
import {areaList} from '@vant/area-data'
export default {
  data(){
    return{areaList}
  },
  methods:{
    showArea(area){
      console.log(area);
    }
  }
}
</script>

总结：以上就是关于Vue CLI安装以及的插件引用！