Vue入门

安装node.js

Node.js 作用类似 maven

如何新建一个Vue工程

1. 配置npm的源(和maven的远程仓库一样)

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

2. 查看npm配置的源

npm config get registry

3. 安装vue/cli软件,客户端软件

npm install -g @vue/cli

创建工程

vue项目通过命令行创建

1. 创建 Vue-Workspace 文件夹
2. cd进入 Vue-Workspace 目录
3. 创建vue项目 vue create 项目名

vue create jsd2203-csmall-web-client

4. 按下回车出现下面的界面,选择下面的选项按下回车,该选项表示手动选择配置
   
5. 按下回车后出现下面的界面,使用空格可以选择或取消选择选项,按下图选择指定选项,按下回车
   

Linter/Formatter 是对源码格式的检查,初学时取消选择

6. 出现下面的界面,选择vue的版本2.x,按下回车
   
7. 出现下面界面,选择下图的选项按下回车
   

指定配置文件路径 ,在项目中就是package.json文件和java中的pom.xml功能类似

8. 出现下面的选项,按下回车即可
   
9. 成功创建项目,指定路径中出现创建的文件
   
   

启动项目

在idea终端中输入以下命令(npm run XX,这里的启动命令可以自定义)

npm run serve

项目启动成功

停止项目

CTRL + C 可以停止项目

Vue CLI工程结构

引入其他框架

使用Element UI

npm i element-ui -S   注意后面大写S

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

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

使用Axios

npm i axios -S

在main.js中添加配置

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

跨域问题

什么是跨域问题

不允许其他服务器向自己的服务器发请求

错误提示有CORS字样 表示存在跨域请求

如何解决跨域问题

在Springboot工程中的启动类加上以下代码

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

Vue简单入门案例

https://gitee.com/chengheng2022/jsd2203-csmall-web-client