如何新建一个vue项目：两种脚手架选择

如何新建一个vue项目，主流有两种脚手架，VueCLI适合Vue2版本，create-vue适合Vue3版本，操作前你电脑需要安装Node.js，版本要求Node.js18及以上，Windows、macOS系统均可操作，该方法不适合未掌握命令行基础，且没有配置本地环境权限的用户，你打开终端执行对应命令就能初始化项目，初始化完成后安装依赖，启动本地开发服务即可预览页面。

如何新建一个vue项目：环境准备

你需要先下载安装Node.js，官网提供LTS长期支持版本，安装成功后，在终端输入node-v和npm-v，能正常输出版本号，就代表环境就绪。npm是Node自带的包管理工具，用来下载项目依赖包。如果国内下载速度慢，你可以切换淘宝镜像源，执行npmconfigsetregistryhttps://registry.npmmirror.com，减少依赖安装超时概率。

检查版本，是前置必要动作。

如何新建一个vue项目：项目初始化命令

执行npmcreatevue@latest之后，终端会弹出交互式选项，你可以选择是否引入TypeScript、路由VueRouter、状态管理Pinia、ESLint代码校验工具，不需要的功能直接回车跳过，项目名称不能包含中文、空格和特殊符号，命名推荐小写字母加短横线。

如何新建一个vue项目：依赖安装与启动

项目文件夹生成完成后，终端会给出后续操作指令，你先cd进入项目目录，也就是cd你的项目文件夹名称，接着执行npminstall，这条命令会读取package.json配置文件，自动下载所有声明的依赖包。依赖安装完成，运行npmrundev启动开发服务器，终端会输出本地访问地址，默认一般是http://localhost:5173，复制到浏览器打开，就能看到vue项目默认页面。

项目开发完成，执行npmrunbuild，打包生成dist静态文件夹，dist内文件可以部署到静态服务器。打包后的代码无法直接打开本地html文件预览，必须放到web服务中访问，这是前端打包后的常规特性。

如何新建一个vue项目：文件结构基础认知

src文件夹是开发核心目录，main.js是入口文件，负责挂载vue实例到页面；App.vue是根组件，其他页面组件都在它内部引入。assets存放图片、css这类静态资源，components目录放置可复用组件，路由开启后会多出router文件夹。你日常编写页面代码，绝大多数修改操作都在src目录内部完成，外层配置文件用来调整构建工具规则，普通业务开发不需要改动。

项目名称使用大写字母，部分系统会出现路径识别异常。

如何新建一个vue项目：常见异常处理

执行命令出现权限报错，Windows终端选择以管理员身份运行，mac和linux系统在命令前添加sudo。依赖安装长时间卡住，优先确认镜像源是否切换成功，也可以删除node_modules文件夹和package-lock.json文件，重新执行npminstall。启动项目提示端口占用，你可以修改配置文件更换端口，或者关闭占用该端口的程序再重新启动。