Vue学习笔记（八）：Vue脚手架

 

 

Vue脚手架是Vue官方提供的标准化开发工具，使用Vue脚手架（vue-cli）可以快速创建 vue 项目。

 

 

1 安装npm¶

 

 

第一步（仅第一次执行）： 下载npm，npm（node package manager）是nodejs下的包管理工具，后续下载、管理vue包都得通过npm进行，下载地址如下：

http://nodejs.cn/download/

注意，安装好之后，最好配置到环境变量中（当然，安装过程自动配置到环境变量）。安装好后，如果输入npm -v输出版本号，证明安装成功。

 

 

npm安装插件是从国外服务器下载，受网络影响大，可能出现异常。针对这一问题，有两种解决方案：

• 方法1：为npm配置淘宝镜像

配置npm淘宝镜像: npm config set registry https://registry.npm.taobao.org

• 方法2：安装cnpm

cnpm是淘宝团队负责维护的npm包，速度快、稳定，运行命令安装cnpm：

npm install -g cnpm --registry=https://registry.npmmirror.com

安装好后，在控制台输入cnpm -v，能够输出如下信息，表示安装成功：

 

 

2 安装yarn¶

• 速度超快。

Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。

• 超级安全。

在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。

• 超级可靠。

使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。

通过一下命令安装yarn :

npm install -g yarn

随后还需要为yarn配置淘宝源：

yarn config set registry https://registry.npm.taobao.org --global

 

 

3 安装vue脚手架并创建项目¶

 

 

全局安装@vue/cli（仅第一次执行）。

npm install -g @vue/cli

切换到要创建项目的目录，然后使用命令创建项目。

vue create xxxx（项目名） 输入命令后，命令行将会提示选择安装vue3还是vue2：

选择使用npm安装还是yarn安装：

启动项目，注意，先将命令行切换到项目目录。

npm run serve