Vue入门（三）之脚手架环境准备和安装

Bertha 。 2022-12-21 06:25 145阅读 0赞

# 前言 #

前面两篇文章以vue一些语法进行一些演示，但我们实际开发中还是基于Vue-cli脚手架创建。这篇文章主要以脚手架在使用需要用到的一些软件的安装，和脚手架的的搭建进行介绍。

# 环境准备 #

## 一、Node.js 的安装 ##

1、下载对应你系统的Node.js版本:  
https://nodejs.org/en/download/

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center]

2、选安装目录进行安装  
默认即可  
安装完成检查PATH环境变量是否设置了node.js的路径。

3、测试  
在命令提示符下输入命令

node ‐v

## 二、NPM 的安装 ##

**1、自动安装NPM**  
npm全称Node Package Manager，他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM的功能和服务端项目构建工具maven差不多，我们通过npm 可以很方便地下载js库，打包js文件。  
node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本  
![在这里插入图片描述][20201115165215428.png_pic_center]

**2、设置包路径**  
包路径就是npm从远程下载的js包所存放的路径。  
使用 npm config ls 查询NPM管理包路径（NPM下载的依赖包所存放的路径）

NPM默认的管理包路径在C:/用户/\[用户名\]/AppData/Roming/npm/node\_meodules，为了方便对依赖包管理，我  
们将管理包的路径设置在单独的地方，本教程将安装目录设置在node.js的目录下，创建npm\_modules和  
npm\_cache，执行下边的命令：  
本教程安装node.js在DD:\\soft\\node\_9\\nodejs下所以执行命令如下：  
npm config set prefix “D:\\soft\\node\_9\\nodejs\\source\\npm\_modules”  
npm config set cache “D:\\soft\\node\_9\\nodejs\\source\\npm\_cache”  
此时再使用 npm config ls 查询NPM管理包路径发现路径已更改

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center 1]

## 三、cnpm的安装（主要是防止npm下载失败的情况，如果正常下载可以不安装） ##

npm默认会去国外的镜像去下载js包，在开发中通常我们使用国内镜像，这里我们使用淘宝镜像  
下边我们来安装cnpm：  
有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。  
输入命令，进行全局安装淘宝镜像。

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

安装后，我们可以使用以下命令来查看cnpm的版本  
cnpm -v  
![在这里插入图片描述][20201115165835192.png_pic_center]

nrm ls 查看镜像已经指向taobao

![在这里插入图片描述][20201115170018215.png_pic_center]

使nrm use XXX切换 镜像  
如果nrm没有安装则需要进行全局安装：cnpm install -g nrm

## 四、webpack的安装 ##

webpack安装分为本地安装和全局安装：  
本地安装：仅将webpack安装在当前项目的node\_modules目录中，仅对当前项目有效。  
全局安装：将webpack安装在本机，对所有项目有效，全局安装会锁定一个webpack版本，该版本可能不适用某个项目。全局安装需要添加 -g 参数。  
**1）本地安装**：

进入webpacktest测试目录目录，运行：  
只在我的项目中使用webpack，需要进行本地安装，因为项目和项目所用的webpack的版本不一样。本地安装就会  
将webpack的js包下载到项目下的npm\_modeuls目录下。  
在门户目录下创建webpack测试目录webpacktest01：

npm install --save-dev webpack 或 cnpm install --save-dev webpack  
npm install --save-dev webpack-cli (4.0以后的版本需要安装webpack-cli)

**2）全局安装加-g，如下**：  
全局安装就将webpack的js包下载到npm的包路径下。

npm install webpack -g 或 cnpm install webpack -g

**3）安装webpack指定的版本**：  
例如 安装webpack3.6.0：  
进入webpacktest测试目录，运行：  
cnpm install --save-dev webpack@3.6.0

全局安装：  
npm install webpack@3.6.0 -g或 cnpm install webpack@3.6.0 -g

测试：  
在cmd状态输入webpack，出现如下提示说明 webpack安装成功  
![在这里插入图片描述][20201115170854276.png_pic_center]

# vue-cli项目搭建 #

**1、新建目录 vue-project**

**2、vs code 执行**  
vue init webpack vue-project  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center 2]  
根据提示作出筛选  
![在这里插入图片描述][20201115173648834.png_pic_center]  
运行完的结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center 3]

根根据提示，运行命令  
cd vue-project  
npm run dev  
在页面上输入提示浏览地址：  
http://localhost:8080

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center 4]

# 对于搭建项目目录介绍 #

**工程目录结构**

*  build：构建相关目录
 *  config：开发相关配置
 *  src：要编写的代码
 *  static：不需要webpack处理的静态文件，比如压缩后的资源,可以直接访问

**Vue-Router**

传统的路由是后端来做，简单说就是请求一个url，后端根据请求的参数内容渲染出相应的html返回。由于JS可以感知到浏览器URL的变化，因此可以做到在url变化的时候去加载不同的DOM内容，这就是前端路由，和后端没有任何关系了。

单页应用(SPA)的用户体验比传统的多页应用要好很多，所以越来越多的公司开始尝试单页应用。单页应用就将原来的多个页面做成一个html，JS根据url的变化切换DOM的内容。这样不用再去请求服务器的整个html内容，只需要请求对应的json数据，因此速度会快很多。

Vue-Router为前端路由提供了封装和简化，并结合组件的使用。让我们可以一个url对应一个组件，轻松编写大型的SPA应用。

<router-view> 显示当前路径所对应的组件内容
    <router-link to="要跳转去的组件的路径">

最外层index.html 是页面一开始请求到页面，这个index.html 中内容，由main.js 中定义了主要引入的组件，路由

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center 5]  
router 定义页面请求路径展示的模板  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center 6]

# 结尾 #

这篇文章主要介绍vue脚手架的搭建和对搭建项目后的一些目录做了比较粗浅的介绍，接下来会关于数据存储到浏览器等内容在介绍

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/320eb0ec15ca478e90f476b326c93340.png
[20201115165215428.png_pic_center]: /images/20221120/f82dc77cfdc34e0f824a6f20299c9337.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/b1f73d772b1b470b83fde37696482d0d.png
[20201115165835192.png_pic_center]: /images/20221120/cec981b628974ace929d7f162e432968.png
[20201115170018215.png_pic_center]: /images/20221120/b726a188586647c8a8cfb23f47d6ff54.png
[20201115170854276.png_pic_center]: /images/20221120/b1d14e96a7d64528be46a62b2b9688b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/6fa5601f67c6492994a5daf6531b1463.png
[20201115173648834.png_pic_center]: /images/20221120/f41e92b6500149219d93a2f500441ce5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/1e4997043d6840a7a9496e5af9b6d585.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/a3db4465495c4cfd87425c8e82304fb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/c85f176c68884e9486b54769fe8395ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221120/8e92c6cee7a447929a0a368a49fa4a87.png