Vue 2 环境准备

最新推荐文章于 2025-11-14 08:31:02 发布

原创最新推荐文章于 2025-11-14 08:31:02 发布 · 733 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #webpack #javascript

前端学习专栏收录该内容

15 篇文章

订阅专栏

本文档详细介绍了如何从头开始设置Vue项目，包括全局安装vue/cli，使用vueui创建项目，选择必要的依赖如vue-router和vuex。接着，讲解了如何安装和使用Vue DevTools，以及配置项目以在7070端口运行。此外，还阐述了修改端口的方法，并提供了避免跨域问题的代理配置。最后，提到了vue.config.js文件中关于代理的设置。

环境准备

安装脚手架

npm install -g @vue/cli

-g 参数表示全局安装，这样在任意目录都可以使用 vue 脚本创建项目

创建项目

vue ui

使用图形向导来创建 vue 项目，如下图，输入项目名

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f0DT6Bh3-1664024171251)(D:\2022.js\imgs\image-20220815141136895.png)]$
在这里插入图片描述

选择手动配置项目

在这里插入图片描述

添加 vue router（实现组件之间跳转）和 vuex（实现组件之间共享）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7y3vBDm6-1664024171252)(D:\2022.js\imgs\image-20220815141412380.png)]$

选择版本，检查错误级别，创建项目

在这里插入图片描述

安装 devtools

devtools 插件网址：https://devtools.vuejs.org/guide/installation.html

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yefIhwvk-1664024171253)(D:\2022.js\imgs\image-20220815141648040.png)]$

运行项目

进入项目目录，执行

npm run serve

在这里插入图片描述

修改端口

前端服务器默认占用了 8080 端口，需要修改一下

文档地址：DevServer | webpack

打开 vue.config.js 添加

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  
  // ...
    
  devServer: {
    port: 7070
  }
  
})

添加代理

为了避免前后端服务器联调时， fetch、xhr 请求产生跨域问题，需要配置代理

文档地址同上

打开 vue.config.js 添加

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    
  // ...
    
  devServer: {
    port: 7070,
    proxy: {
      '/api': {
  		       //'http://localhost:8080/项目名'
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
    
})