Vue 2 环境准备

最新推荐文章于 2024-06-07 10:15:37 发布

稚淮粥

最新推荐文章于 2024-06-07 10:15:37 发布

阅读量624

点赞数 1

分类专栏：前端学习文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/Az201706/article/details/127030812

版权

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

环境准备

安装脚手架

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