Vue3环境安装以及项目搭建全过程

更新时间：2023年12月15日 11:59:29 作者：满天丄星

Vue工程化项目环境配置还是比较麻烦的,下面这篇文章主要给大家介绍了关于Vue3环境安装以及项目搭建的相关资料,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下

搭建Vue 环境

1 下载 node.js

node.js 中文网 https://nodejs.org/en 下载合适的安装包或者可以点击这里进行下载

2 配置环境（安装时系统自动配置环境变量）

进入系统环境变量界面
选择系统变量 path 点击新建
查看是否有node.js 的安装路径

3 查看版本

查看 node 版本命令：node -v
查看 npm 版本命令 npm - v

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rQXAfplr-1668560306557)(C:\Users\yichengyu\AppData\Roaming\Typora\typora-user-images\image-20221115171122390.png)]$

4 安装淘宝镜像，有利于加快下载速度

npm install -g cnpm --registry=https://registry.npm.taobao.org

检测 cnpm -v

5 下载vue-cli (vue脚手架)，用于搭建vue

使用 npm 下载：  -g 表示全局安装
npm install -g @vue/cli
使用 cnpm 下载  速度会更快一点
cnpm install -g @vue/cli

检查版本 vue --version 或者 vue -V

现在即可创建vue项目了

1 第一种方式使用命令行界面

1.进入你需要保存vue文件的文件夹，在目录输入 cmd ，或者直接打开命令行界面 cd 到保存vue文件的文件夹。

输入 vue create vue项目名比如：

vue create test

2.选择创建项目模板这里我们选择自定义按上下方向键切换版本，选中第三个选项回车

3.这里是选择项目初始化需要的模块这里可以根据需要选择，我们一般需要

Eable Router Vuex

按空格键选择选择好后回车即可

4.选择初始化 vue版本我们选 3.x 回车

路由器使用历史模式?(需要适当的服务器设置以便在生产中实现索引回退)(Y/n) 输入 n 回车

你喜欢把配置Babel, ESLint等放在哪里? 选 in package.json 回车

最后一个也选输入 n 回车后项目开始初始化

5.初始化完毕后开启项目分别复制弹出的代码运行项目

6. 打开网址查看自己的vue项目

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N3R9nebJ-1668560245577)(C:\Users\yichengyu\AppData\Roaming\Typora\typora-user-images\image-20221115175506343.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KITt9nsQ-1668560245577)(C:\Users\yichengyu\AppData\Roaming\Typora\typora-user-images\image-20221115175539100.png)]$

2 网页方式创建 vue项目

在命令行界面输入 vue ui

机会打开网页具体操作与以差不多，可以自行尝试

一些用用的指令：

重新更新模块
npm install  
查看当前目录下安装的node包
npm list				
引入 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
运行项目
npm run serve
打包项目
npm run build
安装  vue 3 脚手架 vue-cli
npm install -g @vue/cli
安装 vue 2  j脚手架 
npm install -g vue-cli
卸载 vue-cli
npm uninstall -g vue-cli
引入 axios
npm install axios --save
引入 qs
npm install qs--save
引入 jquery
npm install jquery --save;
引入 bootstrap
npm install bootstrap --save
查找 vue路径
where vue

总结

到此这篇关于Vue3环境安装以及项目搭建的文章就介绍到这了,更多相关Vue3环境安装项目搭建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

解决vue页面渲染但dom没渲染的操作
这篇文章主要介绍了解决vue页面渲染但dom没渲染的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue路由传参及props解耦深入分析
vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于vue路由传参方式的方式总结及获取参数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
vue使用echarts实现三维图表绘制
这篇文章主要为大家详细介绍了vue如何在项目中使用echarts实现三维图表的绘制,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下
2023-08-08
一起来做一下Vue全局提示组件
前端开发的时候,在项目中引入组件以及使用是非常常见操作,下面这篇文章主要给大家介绍了关于Vue全局提示组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
Vue创建项目后没有webpack.config.js(vue.config.js)文件的解决
这篇文章主要介绍了Vue创建项目后没有webpack.config.js(vue.config.js)文件的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue项目中vue.config.js常用配置项详解
在 Vue CLI 创建的项目中,vue.config.js 是核心配置文件,用于定制化构建、开发和部署流程,本文详细解析了该文件的常用配置项,并结合代码示例和表格说明,帮助开发者高效管理项目配置,提升开发体验,需要的朋友可以参考下
2025-04-04
vuejs数据超出单行显示更多，点击展开剩余数据实例
这篇文章主要介绍了vuejs数据超出单行显示更多，点击展开剩余数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Vue3 pinia管理数据的3种方式代码
在Vue3中Pinia是一个状态管理库,它提供了一种简单而强大的方式来管理应用程序的状态,这篇文章主要给大家介绍了关于Vue3 pinia管理数据的3种方式,需要的朋友可以参考下
2024-04-04
解决Vue中的生命周期beforeDestory不触发的问题
这篇文章主要介绍了解决Vue中的生命周期beforeDestory不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue3中的Refs全解析(附实战案例)
Vue3的Refs是一种新的API,用于访问DOM元素或组件实例,这篇文章主要介绍了Vue3中Refs的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-06-06