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

最新推荐文章于 2024-05-16 17:54:12 发布

T1aN_

最新推荐文章于 2024-05-16 17:54:12 发布

阅读量162

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/T1aN_/article/details/131916795

版权

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

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

node -v

npm -v 查看npm版本信息：

npm -v

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

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

npm config get registry

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

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

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

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

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

输入npm安装命令：

npm install -g @vue/cli

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

vue --version

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

在命令行中切换到想要创建项目的路径下，比如：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:

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

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

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

关注