31  Vue环境搭建

以windows为例

在Windows上安装Vue.js开发环境通常指的是安装Vue CLI（Vue的命令行工具），以便创建、管理和构建Vue.js项目。以下是最新版本Vue CLI在Windows上的安装步骤：

31.0.1 安装Node.js

确保你首先安装了Node.js，因为Vue CLI依赖于Node.js环境和npm包管理器。访问Node.js官网下载适合你的Windows系统的最新稳定版安装包，并进行安装。

31.0.2 安装Vue CLI

1. 打开命令提示符（CMD）或PowerShell：

   • 可以通过Win + R快捷键打开运行窗口，然后输入cmd并回车来打开命令提示符。

2. 检查当前已安装的Node.js版本以及npm版本：

   node -v
   npm -v

3. 使用npm全局安装Vue CLI的最新版本：

   npm install -g @vue/cli

   如果网络连接较慢，可以考虑使用国内镜像源加速下载：

   npm config set registry https://registry.npm.taobao.org
   npm install -g @vue/cli

4. 验证Vue CLI是否成功安装及其版本：

   vue --version

31.0.3 创建新Vue项目

一旦Vue CLI安装完毕，你可以使用它来创建一个新的Vue.js项目：

vue create my-project

这里my-project是你要创建的项目的名称，根据提示选择预设配置或者手动选择特性进行安装。

31.0.4 启动项目

进入新创建的项目文件夹，并启动本地开发服务器：

cd my-project
npm run serve

这将会编译并启动一个本地开发服务器，你可以通过浏览器访问显示的地址来查看和调试你的Vue应用。

31.1 Debug

31.1.1 js文件和css文件不起效

修改vue.config.js，将publicPath配置为相对路径

module.exports = defineConfig({
  
  // build时静态资源以相对路径，而不是绝对路径（"/开头"）来显示
  publicPath: './',  
})