Vue项目基础环境搭建完整步骤

约定不等于承诺〃 2024-03-27 08:49 125阅读 0赞

![aad3195e4e4b456e3e3c3cfdc93bae5f.jpeg][]

**使用vue官方脚手架(vue-cli)**

**vue-cli简介**

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，是一个官方脚手架，可以帮助我们快速创建vue项目工程目录，目前最新版本4.x。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性。

**vue-cli安装&使用步骤**

1、全局安装vue-cli

>> **yarn global add @vue/cli** // vue新脚手架是4.X

![d3efcc2700fe4be78b2d4070988e5b7a.png][]

2、创建项目

>> **vue create 项目名**

![0aeedbe43b7746a09b3154ad4e3c270b.png][]

3、进入项目目录，启动项目

>> **yarn serve**

**项目目录详解**

![2d7dd5c7953a41648056f8ec90efde1e.png][]

**一级目录:**

node\_modules 依赖的第三方模块

public vue服务器静态文件目录，只有唯一的一个index.html

**src** 我们的开发目录，最重要的目录，源文件（我们写的代码）目录

.gitignore git忽略列表

babel.config.js es6编译配置

package-lock.json 包描述文件（记录更详细，记住当时的版本信息）

package.json 包描述文件

README.md 说明文档

**二级目录:**

![8fa1c58737b040f58312402c05b1a82b.png][]

src：

assets 存放静态资源，比如:css、images、fonts

components 主要是公用的小组件

views 页面级别的组件

App.vue 整个应用的顶级组件

main.js 入口文件

推荐安装两大vue相关插件:

**vetur**插件，支持vue代码高亮显示。

**Vue VSCode Snippets**插件，写vue效率大幅提高。

[aad3195e4e4b456e3e3c3cfdc93bae5f.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/fb7feb728ca5495fbe14f9a2fc0d4db0.png
[d3efcc2700fe4be78b2d4070988e5b7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/14c4737c80714270ba15ae5527421313.png
[0aeedbe43b7746a09b3154ad4e3c270b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/13f3d4fdb2754cffbd5ac058bfc064d7.png
[2d7dd5c7953a41648056f8ec90efde1e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/7c06df9bd68945eca9424649cfdc5990.png
[8fa1c58737b040f58312402c05b1a82b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/bfed0fd0a5ad4b0d81c0ab46c1f8f9f8.png