如何创建一个Vue项目

步骤

1、打开Windows命令行,进入项目所要创建的地方的目录,然后输入命令

复制代码
vue create vueclidemo2

2、选择Manually select features

3、选择Babel,Linter

4、选2.x

5、选ESLint with error prevention only

6、选 Lint on save

7、In dedicated config files

8、选No

9、切换目录

复制代码
cd vueclidemo2

10、运行项目

复制代码
npm run serve

11、ctrl+点击链接

命令

1、运行项目命令

复制代码
npm run serve

2、下载axios命令

复制代码
npm install axios

3、下载路由命令

复制代码
npm i vue-router@3.5.2 -S

4、下载element命令

复制代码
npm i element-ui -S

在 main.js 中写入以下内容:

复制代码
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

5、下载js-cookie

复制代码
npm install --save js-cookie

6、后端和前端同源政策配置文件

复制代码
package com.example.demo.config;

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class UrlCorsConfiguration implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res,
                         FilterChain chain) throws IOException, ServletException {

        HttpServletResponse response = (HttpServletResponse) res;
        //        允许跨域访问的地址【前端项目部署的地址】
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8081");
        //允许跨域的请求方法GET, POST, HEAD 等
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
        //重新预检验跨域的缓存时间 (s)
        response.setHeader("Access-Control-Max-Age", "3600");
        //允许跨域的请求头
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
        //是否携带cookie
        response.setHeader("Access-Control-Allow-Credentials", "true");
        // 设置响应的类型及字符集编码
        response.setContentType("text/json;charset=utf-8");
        //设置响应的中文编码
        chain.doFilter(req, res);
    }

    public void init(FilterConfig filterConfig) {
    }

    public void destroy() {
    }

}
相关推荐
妮妮喔妮几秒前
如何把HTML转化成桌面Electron
前端·javascript·electron
日月晨曦2 分钟前
React 在线 playground 实现指南:让代码在浏览器里「原地爆炸」的黑科技
前端·react.js
南北是北北2 分钟前
Flow 里的上游/下游
前端·面试
金州_拉文2 分钟前
uniapp
前端·uni-app
鹏程十八少4 分钟前
10. Android <卡顿十>高度封装Matrix卡顿, 修改Matrix源码和发布自己的插件
前端
写代码的stone4 分钟前
antd时间选择器组件体验优化之useLayoutEffect 深度解析:确保 DOM 更新时序的关键机制
前端
Lazy_zheng4 分钟前
8 个高频 JS 手写题全面解析:含 Promise A+ 测试实践
前端·javascript·面试
子轩学长说5 分钟前
Nano banana极致能力测试,不愧为P图之神~
前端
月出5 分钟前
社交登录 - Twitter(前后端完整实现)
前端·twitter
万添裁5 分钟前
C++的const_cast
开发语言·前端·javascript