从零开始快速搭建一个vue项目

﹏ヽ暗。殇╰゛Y 2024-03-22 20:36 109阅读 0赞

### 一、环境准备 ###

#### node.js ####

[node官网链接][node]

检查是否安装node.js,若未安装则去官网下载，安装完成后，在系统设置中配置node的环境变量，在cmd命令行中输入:

node -v 查看版本确认安装成功。

node -v

npm -v 查看npm版本信息：

npm -v

成功打印版本信息则安装成功,如下图所示：

![b579b5081c5a4777a05901929bbc4660.png][]

输入npm config get registry查看配置的镜像地址，默认的为国外镜像，下载速度较慢。

npm config get registry

可以通过 npm config set registry +镜像地址，改为国内的镜像的地址：

npm config set registry https://registry.npmmirror.com/

Node.js在Vue项目中扮演了多个重要角色：

1.  服务器端渲染（SSR）：Node.js可以作为Vue项目的服务器端渲染引擎，用于在服务器端生成Vue组件的HTML代码，然后再将其发送给浏览器。这样可以提升首屏加载速度、SEO友好性和用户体验。
2.  开发服务器：Node.js可以提供一个本地开发服务器，用于在开发阶段实时编译和热重载Vue组件。这使得开发人员可以在修改代码后立即看到结果，提高开发效率。
3.  构建工具：Node.js提供了大量的构建工具和模块，如Webpack、Gulp和Grunt等，可以用于打包、压缩和优化Vue项目的代码和资源文件。
4.  中间件：Node.js可以用于编写和管理Vue项目的中间件，用于处理请求、验证用户身份、路由控制等。常用的中间件框架有Express和Koa。
5.  数据库连接：Node.js可以与各种数据库进行连接，如MongoDB、MySQL和Redis等。在Vue项目中，可以使用Node.js来处理与数据库的交互，包括查询、插入和更新数据等。

####  ####

#### vue-cli ####

Vue CLI是一个官方提供的用于快速搭建Vue.js项目的脚手架工具。它提供了一套完整的项目开发工具链，包括项目初始化、开发服务器、构建和部署等功能。

输入npm安装命令：

npm install -g @vue/cli

安装完成后，输入命令vue --version 查看版本信息，确认是否安装成功：

vue --version

正确打印版本信息则安装成功,如下所示：

![ec1fed3673d04df3b1bd5aed53ec0cc0.png][]

#### 项目搭建 ####

在命令行中切换到想要创建项目的路径下，比如：D:\\workspace\\VSCode，我想要在改目录下创建一个叫my-app的项目，首先使用命令cd /d (指定盘符) D:\\workspace\\VSCode(详细路径)切换路径：

cd /d D:\workspace\VSCode

使用vue cli脚手架创建项目：

vue create my-app

my-app就是项目名，也是文件夹的名称，根据自己的需要定义。

执行这条命令后，会出现选择vue版本的选项,根据需要选择vue2或vue3:

![ff0b41a86a4245dbbdd733788676badd.png][]

选择完后会自动构建项目，输出以下信息则构建成功：

![05d2b6992e334daca112bb7c204b2b6e.png][]

可以在文件管理中查看到vue cli给我们构建的项目目录结构：

![a627ccbbea0f425680eca0c5acceaf42.png][]

至此，一个基本的vue项目就搭建完成了，可以通过其他代码编辑器如VS code等，打开项目进行开发了。

[node]: https://nodejs.org/en
[b579b5081c5a4777a05901929bbc4660.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b125692999ae48ca930a0b4648dd7bbb.png
[ec1fed3673d04df3b1bd5aed53ec0cc0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/d040fe026e71431cb14355e9729d0a27.png
[ff0b41a86a4245dbbdd733788676badd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/187a02de360a4fd99a43ebaf3fa45e86.png
[05d2b6992e334daca112bb7c204b2b6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/dbfadca7e0e0495682d8d4c68355494a.png
[a627ccbbea0f425680eca0c5acceaf42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3f429f1ae5d84da586050118ffbfecad.png