Vue脚手架项目构建

Vue脚手架项目构建

一 安装Vue CLI

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

安装Vue CLI的cmd命令:

npm install -g @vue/cli

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

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

如果有的err话,关闭这个命令,在重新构建继续输入上面的命令,知道成功为止.

 vue -V

二 创建项目

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

创建:

vue create xxxxx 

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

Manually select features
Babel / Vuex / Router   //(用空格尽行选择)
2.x
直接回车
In package.json
直接回车

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

npm run serve

三 关于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：锁定的配置文件，不需要，也不建议手动修改此文件中的任何内容

四 关于视图组件

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

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

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

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

五 路由

在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个视图组件是静态导入的。

六 安装Element UI

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

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，不需要额外的声明或引用！

七 关于跨域问题

默认情况下，不允许向别的服务提交异步请求，例如，在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);
    }
}

       .allowedHeaders("*")
            .allowedMethods("*")
            .allowedOriginPatterns("*")
            .maxAge(3600);
}

}