Vue基础知识总结(三):快速构建Vue项目

Vue基础知识总结(三):快速构建Vue项目

📝 个人主页：程序员阿红🔥

🎉 支持我：点赞👍收藏⭐️留言📝

📣 系列专栏：Vue基础知识总结🍁

1. 什么是Vue-cli

• Vue cli是基于Vue的应用开发提供的一个标准的脚手架工具.为应用搭建基础的框架结构,提供插
  件、开发服务、Preset、构建打包功能
• Vue cli 背后集成了现代化开发的诸多功能,通过简单的命令就可以完成 "零配置"的项目环境搭建

2.安装Vue-cli步骤

在安装vue-cli前，要确认自己的电脑是否安装了nodejs和npm.

2.1 安装Node.js

安装了node.js才有使用npm ，才能安装vue-cli

2.1.1 什么是node.js

为什么会有node.js？

传统意义上的 JavaScript 运行在浏览器上，Chrome 使用的 JavaScript 引擎是 V8，Node.js 是一个运行在服务端 的框架，它的底层就使用了 V8 引擎，这样就可以使用javascript去编写一些服务端的程序，这样也就实现了用 javaScript去开发 Apache + PHP 以及 Java Servlet所开发的服务端功能，这样做的好处就是前端和后端都采用 javascript，即开发一份js程序即可以运行在前端也可以运行的服务端，这样比一个应用使用多种语言在开发效率上 要高，不过node.js属于新兴产品，一些公司也在尝试使用node.js完成一些业务领域，node.js基于V8引擎，基于 事件驱动机制，在特定领域性能出色，比如用node.js实现消息推送、状态监控等的业务功能非常合适。

2.1.2 安装node.js

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

   ​ 安装: node-v12.18.1-x64.msi

   

2. 选安装目录进行安装, 我选择安装在了E盘: E:\Program Files\nodejs

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

   node -V //会显示当前node的版本
   

2.2 安装NPM

npm全称Node Package Manager，他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM 的功能和服务端项目构建工具maven的依赖管理功能差不多，我们通过npm 可以很方便地下载js库，打包js文件。

2.2.1 自动安装NPM

node.js已经集成了npm工具

在命令提示符输入 npm -v 可查看当前npm版本

npm -v

2.2.2 查看包管理路径

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

npm config ls

我们发现NPM默认的管理包路径在:

C:\Users\86187\AppData\Roaming\npm

2.2.3 设置包管理路径

依赖包放在C盘不太合适,为了方便对依赖包管理, 我们将管理包的路径设置在单独的地方:

1. 我们选择一个路径,专门存放这些依赖包.我选择创建一个目录: H:\software\nodejs_package

2. 在 H:\software\nodejs_package 下再创建 npm_modules 文件夹 和 npm_cache 文件夹:

   

3. 执行下边的命令,设置为自定义的包管理路径：

   npm config set prefix “H:\software\nodejs_package\npm_modules”
   npm config set cache “H:\software\nodejs_package\npm_cache”

4. 此时再使用 npm config ls 查询NPM管理包路径发现路径已更改

   

2.2.4 NPM环境变量配置

1. 查看npm的全局路径是什么

   npm config get prefix
   

   

2. 配置PATH环境变量

   添加新的系统变量: key=NODE_HOME , value= H:\software\nodejs_package
   path中添加 %NODE_HOME%\npm_modules

   

2.2.5 安装cnpm

npm默认会去国外的镜像去下载js包，在开发中通常我们使用国内镜像，这里我们使用淘宝镜像

下边我们来安装cnpm： 有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。

1. 联网情况下, 输入命令，进行全局安装淘宝镜像:

   //安装
   npm install -g cnpm --registry=https://registry.npm.taobao.org
   //查看cnpm的版本
   cnpm -v
   

2.2.6 安装vue-cli

目前主流版本是 2.x 和 3.x 版本,安装3.x 以上的版本是因为该版本既可以创建2.x项目与3.x 项目

注意: 以管理员身份打开命令行

1. 安装命令

   npm install -g @vue/cli
   

2. 输入 vue命令

3. 输入 vue -V 查看版本

vue -v

3. 快速构建Vue项目

3.1 步骤说明

我们使用vue-cli 快速构建项目,步骤如下:

1.桌面创建一个空的文件夹

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ljW0TrU-1649056729758)(file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image033.jpg)]

2. 以管理员身份运行cmd , 进入到vueTest文件夹

3.执行下面的命令

1.基于交互式命令方式,创建项目
//文件名 不支持驼峰（含大写字母）使用短横线方式
vue create my-project

4. 选择自定义安装,点击回车

5. 在这列表中,选择我们要安装的组件,使用空格键选择,选好后回车

6. 按回车之后,提示选择什么模式的路由,我们输入 n (表示选择hash模式)

7. 选择项目配置文件单独存放

8. 是否保存模板,选择n 不创建

9. 安装完成,提示输入执行下面这两个命令

10.首先进入项目目录

cd my-project

11.启动项目

npm run serve

12. 访问项目

http://localhost:8080/

13.停止项目 只要关闭命令行窗口就可以

3.2 导入Vue项目到VSCode

1. VSCode中右键选择打开文件夹

2. 选择桌面上的项目

3. 打开项目,可以看到如下项目结构

3.3 项目结构介绍

💖💖💖 完结撒花

💖💖💖 路漫漫其修远兮，吾将上下而求索

💖💖💖 写作不易，如果您觉得写的不错，欢迎给博主点赞、收藏、评论、收藏来一波~让博主更有动力吧