用 vue-cli 创建 Vue.js 项目

到目前为止我们在 Vue.js 课程里做的项目，都是直接在 HTML 文档上链接的资源，比如一些 CSS 与 JS 文件。因为这样做最简单，可以快速去理解 Vue.js 本身，减少了开始学习的干扰。现在，我们要深入一些，用模块化的方法去创建 Vue.js 项目，这就需要应用一大堆工具，你还得想办法根据自己的需求去配置这些工具。Vue.js 官方提供的 vue-cli 这个命令行工具可以快速地帮我们配置好这套开发环境。

安装 vue-cli

用 npm 或 yarn 在全局安装一下 vue-cli，打开命令行工具，Windows 可以用 cmder，macOS 用系统自带的终端。执行：

npm install vue-cli --global

完成以后，我们就可以使用 vue 这个命令行了。

创建项目

vue-cli 提供了几个官方的项目模板，比如我想根据 webpack 这套模板去创建一个 Vue.js 项目，项目的名字叫 vuex-notes-example，执行一下：

vue init webpack vuex-notes-example

vue-cli 会问我们一些问题，根据我们的回答去生成一个 Vue.js 项目。完成以后进入到项目所在的目录，再去安装项目需要的所有的东西：

cd vuex-notes-example
npm install

项目里面提供了几个命令，本地开发项目时，可以执行：

npm run dev

这样会给我们在本地创建一个服务器，并且会自动在浏览器上打开服务器的地址，通过这个地址你可以预览项目。

编辑项目

项目里用了 .vue 文件，这是 Vue.js 项目的单文件组件，一个 .vue 文件就是一个组件，里面可以包含组件的模板，脚本，还有样式。默认编辑器没有代码高亮，Atom 编辑器可以安装一下 language-vue 插件。

在创建的项目里面，很多都是一些配置文件，我们真正要关心的是 src 目录下的东西。项目的主要代码都会放在这个目录的下面。

• main.js：是应用的入口文件，里面用了 App 组件。
• App.vue：项目的主组件，里面导入了一个叫 HelloWorld 组件。
• components/HelloWorld.vue：界面上显示的欢迎界面，就是这个组件提供的。