Vue.js 是一款前端框架，它让我们可以更方便地构建用户界面。Vue-cli 是 Vue.js 官方提供的一个脚手架工具，它可以帮助我们快速搭建一个 Vue.js 项目的基本结构。
安装 Vue-cli
在使用 Vue-cli 之前，我们需要先安装 Node.js 和 npm。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，npm 则是 Node.js 的包管理工具。
安装完成 Node.js 和 npm 后，我们可以使用 npm 命令全局安装 Vue-cli：
npm install -g vue-cli
创建一个 Vue.js 项目
安装完成 Vue-cli 后，我们就可以使用它来创建一个 Vue.js 项目了。在终端中输入以下命令：
vue init webpack my-project
其中，my-project 是你的项目名称，可以根据需要进行修改。
执行上述命令后，Vue-cli 会自动下载模板并生成一个基本的 Vue.js 项目结构。
项目结构
生成的项目结构如下：
-- -------------------- ---- ------- ----------- --- ------ - --- -------- - --- ----------------- - --- ------------- - --- ------------- - --- -------- - --- ------------------ - --- -------------------- - --- ------------------- - --- -------------------- --- ------- - --- ---------- - --- -------- - --- ----------- --- ------------- --- ---- - --- ------- - --- ------- - - --- -------- - --- ----------- - - --- --------- - --- ------- --- ------- --- -------- --- ------------- --- ------------- --- ------------ --- ---------- --- ---------- --- ------------ --- ---------
其中，重要的文件和文件夹包括：
src文件夹：存放项目的源代码；src/main.js文件：项目的入口文件；src/App.vue文件：根组件；src/components文件夹：存放组件；static文件夹：存放静态资源；index.html文件：网页的入口文件；package.json文件：项目的配置文件。
运行项目
在项目根目录下，执行以下命令可以启动开发服务器：
npm run dev
然后在浏览器中访问 http://localhost:8080，就可以看到项目的运行效果了。
配置文件
在项目根目录下，有一个 config 文件夹，里面包含了一些配置文件：
index.js：主要配置文件，包括开发服务器的端口号、代理设置、打包输出路径等；dev.env.js：开发环境的配置文件；prod.env.js：生产环境的配置文件。
我们可以根据需要修改这些配置文件，来达到自定义配置的目的。
打包项目
在开发完成后，我们可以使用以下命令将项目打包成静态文件：
npm run build
打包完成后，在项目根目录下会生成一个 dist 文件夹，里面包含了打包后的静态文件。
总结
Vue-cli 是一个非常实用的工具，它可以帮助我们快速搭建一个 Vue.js 项目的基本结构。通过本文的介绍，我们学习了如何安装 Vue-cli、创建一个 Vue.js 项目、运行项目、修改配置文件以及打包项目。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cabb33add4f0e0ff498ecb