Vue.js 是一款被广泛应用于现代 web 应用开发的 JavaScript 框架。随着 Vue.js 的使用越来越流行，Vue CLI 成为了一款经典工具，用于帮助开发者快速搭建基于 Vue.js 的项目。本文将为您介绍如何使用 Vue CLI 创建项目。
安装 Vue CLI
首先，我们需要在本地安装 Vue CLI。您可以通过 npm 包管理工具进行安装。运行以下命令：
npm install -g vue-cli
创建项目
安装完 Vue CLI 之后，我们就可以使用它创建一个新的 Vue.js 项目。首先，通过命令行进入您想要创建项目的目录。然后，运行以下命令：
$ vue init webpack my-project
其中，webpack 是一个高度可配置的打包工具，Vue CLI 内置了 webpack，可以直接使用它来快速创建一个新项目。my-project 是项目名称，您可以根据自己的需要更改。
然后，您会看到几个问题：
- Project name: 项目名称，我们刚才已经提到了。
- Project description: 项目描述，可以留空。
- Author: 项目作者，可以留空或者填写您自己的信息。
- Vue build: 选择 Vue.js 的构建方式。我们选择默认的 Runtime + Compiler。
- Install vue-router: 是否安装 Vue.js 官方的路由库。这里我们选择
Y。 - Use ESLint to lint your code: 是否使用 ESLint 对您的代码进行语法检查。我们选择默认的
Y。 - Set up unit tests: 是否设置项目单元测试。我们选择默认的
N。 - Setup e2e tests with Nightwatch: 是否设置项目 e2e 测试。我们选择默认的
N。 - Should we run
npm installfor you after the project has been created? 是否在项目创建后马上运行npm install。我们选择默认的Y。
随着您不断输入答案，Vue CLI 会基于您的答案创建一个新的项目。
如果您想直接使用默认值，可以使用以下命令：
$ vue init webpack my-project --defaults
然后您就可以看到 Vue CLI 创建的项目结构了。
项目结构
Vue CLI 创建的项目结构如下：
-- -------------------- ---- ------- ----------- --- ------ --- ------- --- ------------- --- ---- - --- ------- - --- ----------- - --- ------- - --- ------- --- ------- --- ----- --- -------- --- ------------- --- ---------- --- ---------- --- ----------------- --- ------------
让我们来看一下每个文件和目录：
build/：目录包含配置 webpack 的文件config/：目录包含路由、代理、构建等配置文件node_modules/：目录包含应用依赖的所有 npm 包src/：目录包含项目的源代码assets/：目录包含静态资源文件，例如图片和 CSS 文件components/：目录包含 Vue.js 组件App.vue：Vue.js 根组件main.js：应用的入口 JavaScript 文件
static/：目录包含静态资源文件，例如图片和 CSS 文件test/：目录包含测试文件.babelrc：Babel 配置文件，用于转换 ES2015 代码.editorconfig：编辑器配置文件.gitignore：git 忽略文件index.html：项目的主 HTML 文件package-lock.json：锁定应用的依赖包版本package.json：应用的 package.json 文件
运行项目
现在我们已经有了一个全新的 Vue.js 项目，我们可以运行它。运行以下命令：
$ npm run dev
这会启动应用程序并在 http://localhost:8080 上运行。
创建组件
Vue.js 是一个组件化的框架，因此我们需要在项目中创建组件。我们可以使用 Vue CLI 为我们启动的项目提供的命令行工具来创建组件。
运行以下命令：
$ vue component MyComponent
这将在 src/components/ 目录下创建一个名为 MyComponent.vue 的文件。
让我们来看一下一个简单的示例组件：
-- -------------------- ---- -------
----------
-----
------ ------- -------
------
-----------
--------
------ ------- -
----- --------------
---- -- -
------ -
-------- ------- -----
-
-
-
---------
------ -------
-- -- --
--------总结
Vue CLI 是一个创建 Vue.js 项目的强大工具。通过简单的命令，您可以在几分钟内创建一个全新的 Vue.js 项目。同时，您还可以使用 Vue CLI 创建组件和插件，来加速您的开发工作。希望这篇文章能够对您深入了解 Vue CLI 以及如何使用它创建项目有所帮助。祝您的 Vue.js 旅程一路顺风！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6523000395b1f8cacda70ba0