<h4> Vue3 安装与配置 详细教程</h4> 讯享网
- NodeJS 安装与配置
- Vue 安装与配置
- 安装 Vue-cli 3.x 脚手架
- Vue3 项目创建
1. NodeJS 安装与配置
1.1 百度上搜索 node 找到其官网（英文官网）
1.2 可以搜索其中文官网
打开之后，显示如下
1.3 通过中文网下载NodeJS安装文件 （Node.js 中文网）
1.3.1 目前下载的是：Nodejs18.16.1 版本（不建议使用最新版本）
1.3.2 下载之后的文件格式
1.4 Nodejs的安装
1.4.1 双击nodejs的安装文件，出现如下界面，点击下一步即可
1.4.2 选择安装的目录
至此，nodejs安装完成
1.5 验证Nodejs是否安装成功(按住快捷键 输入 打开命令行)
输入如下命令：
node -v ：查看nodejs的版本
npm -v ：查看npm的版本
1.6 配置npm默认安装目录和缓存日志目录
1.6.1 首先查看npm默认安装目录与缓存日志目录的位置
npm config get prefix ：查看npm全局安装保存路径
npm config get cache：查看npm安装缓存cache路径
1.6. 2. 修改默认路径
npm config set prefix ‘路径’
npm config set cache ‘路径’
例如：修改为：
D:softtoolsvue odejs ode_global
D:softtoolsvue odejs ode_cache
则：
1.7 修改配置镜像
1.7.1 查看目前的镜像设置
npm config get registry
1.7.2. 更换镜像（淘宝镜像）
临时指定淘宝镜像源：
npm –registry https://registry.npm.taobao.org install express
永久指定淘宝镜像源：
npm config set registry https://registry.npm.taobao.org
安装 cnpm
npm install -g cnpm –registry=https://registry.npm.taobao.org
备注：以上淘宝镜像过期，可以尝试安装淘宝新的镜像，如下：
npm config set registry https://registry.npmmirror.com
1.7.3 检查镜像是否安装成功：
执行：npm config get registry
1.7.4 查看获取安装包信息：Npm info 包名 看看能否获得包名的信息
例如：我们来看一下npm获取的vue包的相关信息：
执行：npm info vue
1.8 npm环境变量的配置：NPM_HOME
1.9 PATH中添加 vue.cmd的路径
2. Vue 安装与配置
2.1. 安装vue.js命令：
2.1.1 npm install vue -g （或：cnpm install vue -g）
2.1.2 这里的-g是指安装到global全局目录去(安装到global下，即node_global目录中）
2.2 验证vue的安装
2.2.1 npm list vue
2.2.2 npm list vue -g
2.3 安装webpack模块
安装webpack模板，Webpack是一个模块打包器(bundler)。
2.3.1 npm install webpack -g
2.3.2 查看webpack的版本
2.4 安装webpack-cli
2.4.1 npm install webpack-cli -g
3. 安装Vue-cli 3.x 脚手架
Vue CLI 是一个基于 Vue.js 进行前端快速开发的脚手架(框架)。
3.1 安装vue-cli 3.x
执行： npm install @vue/cli -g
3.2 使用npm命令查看全局安装的情况
执行：npm list -global
4. Vue3 项目创建
4.1 vue3.0创建项目
vue create 项目名
例如在：D:softtoolsworkspaceworkspace_vue 目录下创建一个项目vueproject，先切换到workspace_vue目录，再执行创建命令，如下
4.2 Vue创建过程中的选项配置（可根据自己的需求进行参数的配置）
4.3 开始创建项目（第一次创建比较慢）
4.4 vue项目创建完成
4.5 启动vue项目
4.5.1 在当前cmd命令窗口，执行 cd vueprojecct进行目录的切换，然后 执行 npm run serve 启动项目
4.6 访问：http://localhost:8080
到此，已全部完成！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/162960.html