简要说明:
首先确定电脑内有没有安装环境
在准备搭建的文件夹地址栏输入cmd回车打开命令行窗口
分别运行 node -v vue -V 查看是否安装node和vue-cli(如果安装过按需跳过以下步骤)
一、环境准备
1、安装node.js
- 下载地址:Node.js
- 中文界面展示
2、检查node.js版本
- 进入准备搭建项目的文件夹,在上方地址栏输入cmd回车打开控制台
- 查看版本号,输入node -v(中间记得空格)
- 由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 npm -v 来测试是否成功安装。
3、为了提升后期npm的安装速度,可以使用淘宝镜像源 (可跳过)
- 使用淘宝镜像命令(建议加上 -g 进行全局安装):
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装后可把npm改成cnpm使用以提升速度
- 检查cnpm的安装是否成功 cnpm -v
二、vue环境搭建
1、安装vue-cli
npm install -g @vue/cli //这是国外的比较慢
cnpm install -g @vue/cli //使用淘宝镜像源
检查是否安装成功 vue -V(注意大小写)
三、创建vue项目
1、创建vue2项目
- 进入准备搭建项目的文件夹,在上方地址栏输入cmd回车打开控制台
- 输入vue create myvue 回车(myvue项目名称可自定义,必须英文)
2、自定义配置
- 配置介绍,带*号说明被选中,按空格键选中或取消
- 下面是我选择的配置,按需选择
- 代码格式校验新手先不建议,可能会出现频繁的报错
3、选择版本(vue2)
- 演示vue2
- 选好版本回车后来到这里
- 由于我之前选择了css预处理器,所以增加了选项
- 有选了代码格式校验的看这里
- 代码格式校验检查时间
- 选择配置文件存在的方式,推荐整合回车确认
- 询问是否保存本次配置信息,我选择否 n
- 项目构建中
- 项目构建完成,按照提示运行项目
- cd进文件夹
- 输入npm run serve运行项目
在浏览器输入地址http://localhost:8080/
看到浏览器页面显示出来后,项目就创建成功啦!
4、创建vue3项目
- 基于
webpack
构建项目,基于vite
构建项目,谁更快体验更好?vite - 基于
webpack
的vue-cli
可以创建 vue 项目吗?可以,慢一点而已(步骤参考vue2)
这里推荐使用vite构建工具
1.运行创建项目命令:npm create vite@latest
npm create vite@latest 是一个命令,它会在您的项目中创建一个新的 Vite 项目,并安装最新版本的 Vite。
2.输入项目名称,默认是 vite-project
3.选择前端框架
4.选择项目类型
5.创建完毕,依次运行提示命令
cd vite-project (进入项目文件夹)
npm install (安装配置依赖)
npm run dev (运行项目)
6. 浏览器输入地址 http://127.0.0.1:5173/
出现这个页面的话就说明成功啦!