Vue3.0安装与配置详细

1、NodeJs安装和配置
1.1 进入NodeJs官网 https://www.nodejs.com.cn/
下载 NodeJs：

安装NodeJs：

1.2 至此，NodeJs已安装完成
输入如下指令：
node -v :查看nodejs的版本
npm -v :查看npm的版本

1.3 配置npm默认安装目录和缓存日志目录
1.3.1 首先查看npm默认安装目录与缓存日志目录的位置
npm config get prefix ：查看npm全局安装保存路径
npm config get cache：查看npm安装缓存cache路径

1.3. 2. 修改默认路径
npm config set prefix “D:Program Files (x86)
odejs
ode_global”
npm config set cache “D:Program Files (x86)
odejs
ode_cache”

1.4 修改配置镜像

1.4.1 查看当前的镜像设置 npm config get registry

1.4.2. 更换镜像（淘宝镜像）
临时指定淘宝镜像源：
npm –registry https://registry.npm.taobao.org install express
永久指定淘宝镜像源：
npm config set registry https://registry.npmmirror.com
安装 cnpm
npm install -g cnpm –registry=https://registry.npmmirror.com
1.4.3 检查镜像是否安装成功：
执行：npm config get registry

1.4.4 查看获取安装包信息：Npm info 包名 看看能否获得包名的信息
例如：我们来看一下npm获取的vue包的相关信息：
执行：npm info vue

1.5 npm环境变量的配置：NPM_HOME

1.6 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的版本 npmwebpack -v

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 3.0project项目名
例如在：D:softtoolsworkspaceworkspace_vue 目录下创建一个项目vueproject，先切换到workspace_vue目录，
再执行创建命令: vue create vueproject

4.2 Vue创建过程中的选项配置（可根据自己的需求进行参数的配置)

4.4 vue项目创建完成

4.5 启动vue项目
4.5.1 在当前cmd命令窗口，执行 cd vueprojecct进行目录的切换，然后 执行 npm run serve 启动项目

4.6 访问：http://localhost:8080

到此，已全部完成！
转载自：https://blog.csdn.net/majingbobo/article/details/134034891