Vue的初步学习（一）：Vue-cli脚手架的搭建与使用

目录

一、vue-cli脚手架的环境搭建

二、创建一个脚手架项目

---

一、vue-cli脚手架的环境搭建

1.node.js的安装

 Node.js简单来说就是运行在服务端的JavaScript。它是一个基于Chrome JavaScript 运行时建立的一个平台。它是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。（引用自菜鸟教程的Node.js教程）

这里简单的介绍Node.js是因为这里在安装vue-cli时使用的是npm（npm：随同Node.js安装的包管理工具）

下载vue-cli的命令行指令下载：

npm install -g @vue/cli

下载安装好之后在命令行输入 vue -V

出现上面图片中的内容，也就是vue-cli的版本，说明已经安装成功了。 

安装好vue-cli后，接下来要安装的是webpack。

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。

安装webpack的指令：

# --install：安装 | 简写：i
# --global: 全局 | 简写：-g
# 安装最新版本
npm i -g webpack
# 安装指定版本
npm i -g webpack@<version>

使用webpack4+，除了安装webpack，还需要安装webpack-cli

npm i -g webpack-cli

命令行输入webpack -v，验证安装成功与否

但是使用npm的服务器是设置在国外的，所以有时候会发生下载速度缓慢或者下载异常，注意，这只是有时候，因为这里安装的时候是没有产生这些问题的。

但产生这样的问题怎么处理呢？

安装cnpm

npm install -g cnpm -registry=https://registry.npm.taobao.org

这里是安装淘宝镜像

两者的区别： 

1.两者之间只是 node 中包管理器的不同哟，

2.npm是node官方的包管理器。cnpm是个中国版的npm，是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的npm

输入cnpm -v验证安装是否成功

 然后再通过cnpm指令安装，就是将npm换成cnpm

但是这里建议能使用npm就不要使用cnpm，因为有可能会产生各种稀奇古怪问题。

二、创建一个脚手架项目

首先使用命令行进入要创建项目的目录

vue init webpack Vue-test-Project 

这里的Vue-test-Project是自定义的项目名称

 这里还有一点需要注意：

新手不要使用ESLint代码规范！！！！

这是作者饱含血泪的经验！！！

进入创建好的项目目录

接下来是安装项目所需的依赖

npm install 

 如果再之前创建vue脚手架项目的时候，你的安装流程中存在关于是否创建成功后运行npm install的询问，并且选择了yes，那么这一步就可以省略了。

启动项目：

npm run dev

运行之后会自动启动浏览器展示

如果没有自动启动浏览器，则按照命令行产生的url去访问项目

 访问的页面如下图所示：

 这里会有一个问题，就是可能会产生端口的占用，但是开发时8080端口一般都不会被占用。

当你的端口被占用时，你需要去修改配置文件中的端口号。

这里就不对这个多做赘述，但产生这个问题的时候，推荐两个网址：

百度

CSDN - 专业开发者社区