Vue.js+vue-element搭建属于自己的后台管理模板：创建一个项目（四）

前言

本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目，在学习Vue CLI之前我们需要先了解下webpack 代码编译工具，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

webpack

官方中文文档地址：

https://www.webpackjs.com/concepts/

Vue CLI 脚手架构建工具

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，搭建交互式的项目脚手架，Vue CLI版本3.x开始包名称由vue-cli 改成了 @vue/cli，如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 卸载后再安装3.x版本，Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

安装Vue CLI

在命令行输入：cnpm install -g @vue/cli （安装新包）

我们这里推荐用vue-cli 3.x构建项目，新版优化了编译速度，不过你也可以通过老版本创建项目，老版本安装命令：cnpm install --global vue-cli

备注：安装后，检查是否安装成功。vue -V (在此注意V为大写，也可以用vue --version)

创建一个项目

运行以下命令来创建一个新项目：

vue create hello-world

项目构建完成后，会在当前目录下创建hello-world项目文件夹。

$ cd hello-world
$ npm run serve

第一项为默认创建项目，默认的设置非常适合快速创建一个新项目的原型，这里我们选择第二项手动创建项目，按回车继续。

手动设置则提供了更多的选项，通过上下键选择所需的包按空格键选中后，按回车继续创建项目。

创建完成后我们进入hello-world目录，输入npm run serve运行项目（老版本运行命令为npm run dev）。

看到以上提示说明项目成功创建运行了，现在可以通过浏览器打开http://localhost:8080来访问我们网站了。

打开项目

我们通过Visual Studio Code工具打开项目，文件 - 打开文件夹，选中我们创建的项目hello-world

目录结构：

├── public                    # 静态资源
│   │── favicon.ico        # favicon图标
│   └── index.html        # html模板
├── src                       # 源代码
│   ├── assets              # 主题字体等静态资源
│   ├── components     # 全局公用组件
│   ├── router               # 路由
│   ├── store                # 全局 store管理
│   ├── views               # views 所有页面
│   ├── App.vue           # 入口页面
│   └── main.js             # 入口文件加载组件初始化等
├──.browserslistrc        # 浏览器兼容性
├── .eslintrc.js              # eslint 配置项
├── babel.config.js       # babel 配置项
└── package.json         # package.json

目录导航

参考资料

Vue.js