vue环境

最新推荐文章于 2025-06-23 23:47:10 发布

孔先森kong

最新推荐文章于 2025-06-23 23:47:10 发布

阅读量867

点赞数 14

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_33650333/article/details/143406388

Vue是前端开发框架。搭建框架，首先要搭建环境。搭建Vue的环境工具：node.js（JavaScript的运行环境），然后再用nodejs里面的npm（包管理和分发工具）来安装依赖包。

安装node.js

下载地址：Node.js — 在任何地方运行 JavaScript

最好下载稳定版本：下载完之后（安装程序可以直接next step）

双击下载好的msi文件安装node，全部都直接Next，安装路径可自行调整

验证安装

安装成功后，打开cmd命令行，使用如下指令查看node和npm版本，验证是否安装成功:

配置源地址

默认情况下，npm 安装包时会从国外的地址下载，速度很慢，容易导致安装失败，因此需要先配置npm的源地址，使用下面的命令更改npm的源地址为淘宝源

npm config set registry http://registry.npm.taobao.org/

更改好了之后，使用如下指令查看源地址是否正确的被更改

npm config get registry

安装vue-cli

使用下面的命令安装vue-cli工具

npm install -g @vue/cli

安装好之后，检查vue-cli是否安装成功

vue --version

提示：如果出现vue指令不是内部命令，则可以在执行安装vue指令的目录中或全盘查找vue.cmd文件，然后将文件所在目录配置到环境变量的path中，如果找不到则执行npm uninstall -g @vue/cli卸载vue-cli，然后再次安装，再去查找配置

vue-cli的使用

第1步：在终端中进入某个目录
选择一个目录，该目录将放置你的工程文件夹，在cmd终端中进入该目录
第2步：搭建工程
使用vue-cli提供的命令搭建工程，命令如下：

vue create 工程名

注意:工程名只能出现英文、数字和短横线

具体演示如下：
1）进入工程目录，执行创建指令

2）执行指令后会询问工程配置方式是默认还是手工，我们通过上下键选择手工配置，然后Enter回车

3）接着只选择babel，去掉Linter（按空格可选择或去掉选择），然后Enter回车

4）选择vue版本，我们选择2.x，然后Enter回车

5）选择配置存放方式，我们选择json，然后Enter回车

6）输入n不保留配置，然后Enter回车，项目就会开始创建

7）创建完成后，我们在工程目录中就可以找到对应的项目

8）我们将生成的项目直接拖入HBuildX中打开，查看项目结构

补充：vue-cli 4.x实际开发目录结构说明（有些目录我们之前生成的没有）：

目录	含义
dist	用于存放使用 npm run build 命令打包的项目文件
node_modules	用于存放我们项目的各种依赖
public	用于存放静态资源
public/index.html	是一个模板文件，作用是生成项目的入口文件。浏览器访问项目的时候就会默认打开的是生成好的index.html
src	是存放各种vue文件的地方
src/assets	用于存放着各种静态文件，比如css，less，sass，fonts，images，一些外部的js等
src/components	用于存放我们的公共组件，比如Header.vue、Footer.vue等
src/router/index.js	vue-router路由文件。需要引入src/views文件夹下的.vue，配置path、name、component
src/store/index.js	是vuex的文件，主要用于项目里边的一些状态保存。比如state、mutations、actions、getters、modules
src/views	用于存放我们写好的各种页面，比如Login.vue，Home.vue
src/App.vue	是主vue模块，主要是使用router-link引入其他模块， App.vue是项目的主组件，所有的页面都是在App.vue下切换的
src/main.js	入口文件，主要作用是初始化vue实例，同时可以在此文件中引用某些组件库或者全局挂载一些变量
.gitignore	配置git上传想要忽略的文件格式
babel.config.js	是一个工具链，主要用于在当前和较旧的浏览器或环境中将 ES6的代码转换向后兼容（低版本ES）
package.json	模块基本信息项目开发所需要的模块，版本，项目名称
package-lock.json	是在npm install时候生成的一份文件，用于记录当前状态下实际安装的各个npm package的具体来源和版本号

第3步：安装依赖（可省略）

注意：此步可以省略，因为我们项目已经安装了依赖，就是node_modules文件夹中的内容，如果你把此文件夹删了，可以使用此指令重新安装

在cmd终端中通过cd指令进入项目目录first-app，执行如下指令安装依赖：

npm install

第4步：运行项目（开发时用）
继续执行如下指令运行项目：

npm run serve

执行完会弹出防火墙提示，点击允许访问，运行结果如图：

浏览器访问地址，正常显示首页：

提示：cmd窗体此时不能关闭也无法继续输入指令，如需关闭可以使用ctrl+c关闭，那么则无法继续访问页面

第5步：编译打包部署（生产环境部署时用，开发时不用）
1）重新打开cmd，进入first-app目录，执行下面的命令编译打包生成浏览器可运行文件：

npm run build

2）打开HBuildX发现多出了dist目录，这里面就是编译打包后的文件，可独立运行，生成的html、js、css文件都被压缩过了，整个目录结构是不是很熟悉？

3）找到dist中index.html，直接运行到浏览器即可，不过我们发现，页面空白，无法正常显示！报错如下，通过F12查看发现js报错。

4）再通过network查看发现，根本原因在于Vue-CLI 4.x在打包是会将js、css等文件默认以绝对路径的方式引入，导致运行出错。我们可以将其以相对路径方式引入，我们需要在vue-app-demo下新建一个名为vue.config.js的文件，内如如下：

module.exports = defineConfig({
    publicPath:"./"
  transpileDependencies: true
});

然后，重新再终端运行编译打包指令，重新生成dist，在运行到浏览器发现正常访问。
5）将dist目录中的代码直接整合部署到项目中使用，在此不再赘述

HBuildX快速使用vue-cli创建vue项目

1）在文件->新建->项目，选择如下:

2）创建好后，选择项目后，在左下角打开终端，执行运行指令，即npm run serve

3）访问浏览器，效果一样