如何创建一个Vue项目

银迢迢2025-03-12 6:08

步骤

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() {
    }

}