vue2.x之初始化项目
一、安装
在创建vue项目之前,我们需要安装一些环境,比如:node, vue脚手架, npm等
1. 安装node
去官网下载:nodejs.org/en/
下载最近版本,直接在首页下载就好
也可以下载之前的原始版本 nodejs.org/en/download…
如果之前已经安装过node, 可以通过查看node版本看看自己是否已经安装
查看命令
node -V
或者
node -version
2. 安装包管理器
安装npm
下载完node之后,会有对应版本的npm。从上面那个图中也可以看出node版本和npm版本的对应关系
⏰ npm(node package manager):node.js 的包管理器,用于node插件管理(包括安装、卸载、管理依赖等) ,npm 是随同 node.js 一起安装的包管理工具,能解决 node.js 代码部署上的很多问题
每一种node都对应有自己的npm版本,但是在实际开发过程中,需要切换不同项目,这些项目之间可能需要不同版本的npm才能启动成功,这里我推荐使用nvm管理工具去管理npm版本,这样就不用重新卸载和安装node啦。
当然除了npm之外,还有其他的包管理工具,只是这些工具不是node自带的,需要手动安装一下,安装命令如下:
安装yarn
⏰ Yarn是facebook发布的一款取代npm的包管理工具。
特点: 1.速度超快:Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。2.超级安全:在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。3.超级可靠: 使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。
- 安装
npm install -g yarn
- 查看版本
yarn -v
安装cnpm
⏰ cnpm是指淘宝镜像源下的npm包管理工具,即通过淘宝的npm镜像来加快npm包的下载速度。在使用npm安装依赖包时,由于默认情况下npm会从官方的npm仓库下载包,但是由于国内网络环境的原因,有时候下载速度会较慢或不稳定。
因此,为了提升下载速度,可以使用cnpm来替代npm。
- 安装
npm install -g cnpm -registry=https://registry.npm.taobao.org
- 查看版本
cnpm -v
3. 安装脚手架
- npm方式:
npm install -g @vue/cli
- cnpm方式:
cnpm install -g @vue/cli
- yarn方式:
yarn global add @vue/cli
二、创建项目
创建项目有两种方式:可以根据自己的项目情况进行选择
1. vue create project-name
⏰ 这种方式既可以创建Vue2项目,也可以创建vue3项目
1.1 创建命令
vue create vue2
1.2 创建项目
⏰ 切换配置时按键操作:上下键:上下移动。a 键:切换选择所有。i 键:反转选择选项
-
纯净版项目
这种项目不包括router, vuex等配置,就是一个干净的项目
-
自定义配置项目
自定义项目就是说我们可以根据我们的项目选择一些自定义的配置,比如:项目版本(vue2还是vue3),eslint配置,babel配置
1.3 启动项目
-
打开项目目录
cd vue2
-
执行项目启动命令
npm run serve
2. vue init webpack project-name
⏰ 这种方式只能创建vue2项目
2.1 创建命令
vue init webpack vue2
2.2 设置项目名称
这里我们还是使用vue2, 直接回车就好,如果想要自定义项目名称直接输入就好,然后回车

2.3 配置项目描述
这里和项目名称一样,支持默认和自定义描述
2.4 配置作者信息
同上,支持默认和自定义设置
2.5 配置vue编译版本
这里我们选择常规配置

2.6 配置vue-router
需要就‘YES’, 不需要就‘NO’, 然后‘回车’
2.7 配置eslint
回车 选择‘标准模式’
2.8 设置单元测试
回车 选择‘默认的’
2.9 配置依赖安装方式
这里我们选择默认的npm方式
2.10 等待初始化项目
正在根据配置下载模板,生成初始化项目,请耐心等待
2.11 打开项目目录
cd vue2
2.12 启动项目
npm run dev