一、安装nodejs

1、nodejs下载
去官网下载(在安装nodejs时,npm会一起安装,不必单独安装),选择最新版本的前一个版本,因为老版本比较稳定,点击下一步,安装成功之后,进入cmd依次输入node -vnpm -v,查看nodejs和npm的版本,如果安装失败,结果会报错

2、设置镜像
设置镜像可以提高下载速度,这里我设置的是淘宝镜像

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

输入npm get registry获得设置的镜像,如果设置失败,结果会报错

过程及结果展示:

vite vue3 安装 Puppeteer_创建工程


3、重新安装或升级全局的vue/cli包

因为vue cli的包名称已经由vue-cli更改为@vue/cli,所以需要变更vue cli包

方法一、直接升级为@vue/cli包

npm update -g @vue/cli

方法二、卸载vue-cli包+重新安装@vue/cli包

npm uninstall -g vue-cli    # 卸载vue-cli包
npm install -g @vue/cli     # 安装@vue/cli包

输入vue --version查看vue/cli包的版本,如果安装失败,结果会报错

二、创建工程

1、进入想要创建工程的文件夹

d: #进入D盘
cd 该文件夹地址 # 文件夹在d盘的情况

vite vue3 安装 Puppeteer_Babel_02


2、创建工程

vue create 工程名字

vite vue3 安装 Puppeteer_Babel_03


demo是我创建的工程名字

3、关于工程的设置

vite vue3 安装 Puppeteer_创建工程_04


按键盘的上下键进行选择

Vue CLI v4.5.11 说明Vue是3.0版本
Please pick a preset: (Use arrow keys) 请选择一个配置
presetfile ([Vue 3] babel, typescript, pwa, router, vuex, eslint) 我自己以前的配置,配置文件的名字是presetfile ,可以看到是Vue3版本,包含 babel, typescript, pwa, router, vuex, eslint
Default ([Vue 2] babel, eslint) 系统默认配置,Vue2版本,包含babel, eslint
Default (Vue 3 Preview) ([Vue 3] babel, eslint)系统默认配置,包含babel, eslint
Manually select features 自己手动配置

这里我们选择Manually select features

vite vue3 安装 Puppeteer_Vue_05


按键盘的上下键进行调转

Check the features needed for your project: (Press to select, to toggle all, to invert selection) 为你的工程选择配置(勾选按space键,切换所有按a键,反向选择按i键)
() Choose Vue version 选择Vue版本,必须选
() Babel js编译器,可以在打包的时候将ES6代码转化为ES5,必须选
() TypeScript js的一个超集,支持ES6标准,可不选
() Progressive Web App (PWA) Support PWA渐进式的网页应用程序,可不选
() Router Vue中用于管理路由的,必须选
() Vuex Vue中用于管理状态的,必须选
() CSS Pre-processors CSS预处理器,如果要用SAAS,Less,Stylus则选,否则不要选
() Linter / Formatter 代码风格,格式校验,建议选
() Unit Testing 单元测试,不选
() E2E Testing 端到端测试,不选

vite vue3 安装 Puppeteer_Babel_06


按键盘的上下键进行调转
为工程的Vue选择版本,这里我选择3

vite vue3 安装 Puppeteer_Babel_07


Use history mode for router? (Requires proper server setup for index fallback in production) 是否为路由使用历史模式
Pick a linter / formatter config:* 选择代码风格的配置*
Pick additional lint features 选择附加的线的特征
Where do you prefer placing config for Babel, ESLint, etc.? 你想将你的配置保存到哪个文件里
Save this as a preset for future projects? 将以上设置保存成一个预设文件,后面的工程也可以用

选择完毕,Enter

vite vue3 安装 Puppeteer_创建工程_08


工程创建完毕

系统会给你两个选择

cd demo 进入工程

npm run serve 启动工程

切记,进入工程之后才能启动工程,否则会报错

以上过程也可以在开发工具里面进行