如何创建一个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() {
    }

}
相关推荐
zheshiyangyang4 分钟前
Sass开发【四】
前端·css·sass
讨厌吃蛋黄酥13 分钟前
🔥 面试必考题:手写数组扁平化,5种方法全解析(附代码+图解)
前端·javascript·面试
麦当_13 分钟前
Cloudflare Workers 环境下的数据库死锁问题及解决方案
javascript·数据库·后端
GISer_Jing21 分钟前
作业帮前端面试(准备)
前端·面试·职场和发展
大数据0024 分钟前
Flink消费Datahub到ClickhouseSink
java·前端·flink
知识分享小能手44 分钟前
React学习教程,从入门到精通,React 前后端交互技术详解(29)
前端·javascript·vue.js·学习·react.js·前端框架·react
天天进步20151 小时前
React Server Components详解:服务端渲染的新纪元
开发语言·前端·javascript
lvchaoq1 小时前
react的依赖项数组
前端·javascript·react.js
许___1 小时前
基于 @antv/x6 实现流程图
vue.js·antv/x6
qq_10055170751 小时前
WordPress给指定分类文章添加一个自动化高亮(一键复制)功能
运维·前端·自动化·php