关于Vue CLI

小汤不困

已于 2022-09-22 10:13:21 修改

阅读量499

点赞数

文章标签： vue.js javascript 前端

于 2022-09-22 10:11:34 首次发布

本文链接：https://blog.csdn.net/tlh980911/article/details/126986525

版权

1. 安装Vue CLI

Vue CLI是Vue框架的客户端工具，创建Vue项目、运行Vue项目都需要事先安装此工具。

安装Vue CLI的命令:

npm install -g @vue/cli

以上命令执行完后，只要没有提示错误（Err或Error字样），即可视为成功!

当Vue CLI安装完成后，可以通过以下命令查看版本号并检查是否安装成功：

vue -V

2. 创建项目

在命令提示符窗口中，执行vue create 项目名称的命令，就可以创建项目，创建出来的项目会在命令提示符窗口中提示的位置（即：敲命令时左侧提示的位置）。

例如：创建csmall-web-client项目：

vue create csmall-web-client

需要注意：执行以上命令后，会有一点卡顿，此时不要反复按回车，接下来，需要选择创建选项，分别是：

Manually select features
Babel / Vuex / Router
2.x
直接回车
In package.json
直接回车

当创建完成后，可以使用IntelliJ IDEA打开此项目，并且，在IntelliJ IDEA的Terminal（终端）面板中，可以执行启动项目的命令：

npm run serve

3. 关于Vue脚手架项目

Vue脚手架项目是一个单页面的应用，即整个项目中只有1个html页面，它认为这个页面是由若干个视图组合而成的，每个视图都只是该页面中的一个部分，并且，都是可以被替换的！

项目的文件夹结构：

[.idea]：仅当使用IntelliJ IDEA打开此项目后，才会有这个文件夹，是IntelliJ IDEA管理项目时使用的，无需关注此文件
[node_modules]：此项目中使用的各个库的文件，注意：通常，提交到GIT的项目代码中并不包含此文件夹，需要先执行npm install命令，则会自动下载此项目中的各个库的文件，然后才可以运行项目
[public]：此项目的静态资源文件夹，通常用于存放图片、自行编写的js、自行编写的css等文件，此文件夹下的资源的访问路径都是根路径
public/favicon.ico：此项目的图标文件，此文件必须在这个位置，且必须是这个文件名
public/index.html：此项目中唯一的html文件，也是项目打开页面的入口
[src]：源文件的文件夹
[src/assets]：资源文件夹，此处的资源文件应该是不随程序运行而发生变化的
[src/components]：视图组件文件夹，此文件夹下的视图组件通常是被视为封装的视图，且将会被其它视图调用
[src/router]：此项目中配置路径的文件所在的文件夹
src/router/index.js：默认的路由配置文件
[src/stroe]：此项目的配置全局共享变量的文件所在的文件夹
src/store/index.js：默认的配置全局共享变量的文件，此处声明的变量，在任何一个视图组件中均可使用
[views]：一般的视图组件所在的文件夹
src/App.vue：默认绑定到index.html中的<div id="app"></div>的视图组件，可简单理解为页面的入口，此视图组件不需要配置路由，默认就会显示
src/main.js：此项目的主配置文件，通常，在项目中安装了软件之后，都需要在此文件中补充配置
.gitignore：使用GIT时的忽略文件清单，即：用于配置哪些文件不会提交到Git
package.json：项目的配置文件，例如配置了此项目的依赖项等
package-lock.json：锁定的配置文件，不需要，也不建议手动修改此文件中的任何内容

4. 关于视图组件

在Vue脚手架项目中，以.vue为作文件名后缀的，就是视图组件！

在视图组件中，源代码主要有3个部分：

<template>：设计界面的源代码部分，此标签下可以使用HTML或相关技术（例如Element UI）来设计界面
- 注意：在<template>标签下，只能有1个直接子标签！
<script>：编写JavaScript代码
<style>：编写CSS代码

在设计界面时，可以使用<router-view/>表示此视图组件不确定的内容！例如在App.vue中就使用了这个标签，此标签将显示的内容取决于URL（地址栏中的网址）。

5. 路由

在Vue脚手架项目中，使用“路由”来配置URL与视图组件的对应关系。

通过src/router/index.js可以配置路由。

核心代码是：

import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

以上配置中，path表示路径，name表示名称，可以不必配置，component表示视图组件。

关于component的值，可以使用静态导入的方式来确定，例如HomeView，也可以使用import()函数导入，例如以上关于/about的配置。

通常，在每个项目中，只有1个视图组件是静态导入的。

6. 安装Element UI

在终端中执行以下命令安装Element UI：

npm i element-ui -S

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

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

Vue.use(ElementUI);

至此，在项目中的任何一个视图组件中都可以直接使用Element UI，不需要额外的声明或引用！

7. 安装axios

在终端执行安装axios的命令：

npm i axios -S

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

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

在Vue CLI项目中，使用axios时，在then()的回调内部，不可以使用匿名函数，必须使用箭头函数，例如：

this.axios.post(url, data).then((response) => {
    
});

完整代码示例：

this.axios.post(url, this.ruleForm).then((response) => {
    // console.log(response);
    if (response.data == 1) {
      // console.log('登录成功！');
      this.$message({
        message: '登录成功！',
        type: 'success'
      });
    } else if (response.data == 2) {
      // console.log('登录失败，用户名错误！');
      this.$message.error('登录失败，用户名错误！');
    } else {
      // console.log('登录失败，密码错误！');
      this.$message.error('登录失败，密码错误！');
    }
  });

8. 关于跨域问题

默认情况下，不允许向别的服务提交异步请求，例如，在http://localhost:9000服务上，向http://localhost:8080提交异步请求，这是不允许的！

在基于Spring Boot的项目中，要允许跨域访问，可以在启动类上实现WebMvcConfigurer接口，并重写addCorsMappings()方法：

@ServletComponentScan
@SpringBootApplication
public class CoolsharkApplication implements WebMvcConfigurer {

    public static void main(String[] args) {
        SpringApplication.run(CoolsharkApplication.class, args);
    }

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