创建vue项目,使用脚手架

一 使用3.0以上版本的vue

1 环境配置

2 执行cnpm i -g @vue/cli 安装最新的脚手架

3 新建项目:选择项目路径使用cmd,执行vue ui，可弹出新建项目的界面

4 新建项目步骤

创建好后可在package.json文件中配置启动的命令如下

5 项目中安装element框架

六 项目中安装axios

---

二 简单有效的流程操作（若有报错的可百度，比如缓存的原因运行 npm cache clean --force）

使用命令：
建立全局vue： npm install -g vue-cli
在项目目录下执行创建项目： vue init webpack my-project
cd my-project
npm install
npm run dev

一创建脚手架

1 检测是否安装好nodejs和npm
node -v
npm -v
2 安装vue-cli
cmd中数据命令建立全局vue ：npm install --global vue-cli
我的装在了如下路径：C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli
测试是否安装成功：vue -V
# 创建vue项目
在工作空间下使用cmd命令：vue init webpack vueProject

控制台显示：

提示目录已存在，是否继续：Y
Project name（工程名）:回车
Project description（工程介绍）：回车
Author：作者名
Vue build（是否安装编译器）:回车
Install vue-router（是否安装Vue路由）：回车
Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：n
Set up unit tests（安装测试工具）：n
Setup e2e tests with Nightwatch（测试相关）：n
Should we run `npm install` for you after the project has been created? (recommended)：选择：No, I will handle that myself

二 初始化项目

进入项目目录使用命令npm i

三 运行项目

npm run dev

四 前后端分离，axios配置
1 项目路径下使用命令npm install axios
2 前端vue中全局使用方式：

3 跨域解决：在springboot中配置

@Configuration
public class SpringConfig implements WebMvcConfigurer {

    //跨域
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}