使用Vue + ElementUI搭建基本的脚手架

使用Vue + ElementUI搭建基本的脚手架

一、脚手架的构建工具

我们这里使用vue-cli工具构建脚手架【Vue-CLI指南：https://cli.vuejs.org/guide/】：
Vue CLI是用于快速Vue.js开发的完整系统，它提供：

1. 通过交互式项目脚手架@vue/cli；
2. 通过@vue/cli+ 零配置快速原型@vue/cli-service-global；
3. 运行时依赖项（@vue/cli-service）：
   a. 可升级
   b. 建立在webpack之上，具有合理的默认值；
   c. 可通过项目内配置文件进行配置；
   d. 可通过插件扩展
4. 丰富的官方插件集合，集成了前端生态系统中的最佳工具。
5. 完整的图形用户界面，用于创建和管理Vue.js项目。
   Vue CLI的目标是成为Vue生态系统的标准工具基线。它可以确保各种构建工具与合理的默认设置一起顺利运行，因此您可以专注于编写应用程序，而不必花费大量时间进行配置工作。同时，它仍然可以灵活地调整每个工具的配置，而无需退出。

二、安装@vue/cli

1. 查看是否安装@vue/cli

$ vue -V （注意这里是大写的“V”）

2. 下图检测出来未安装；
3. 使用cnpm install -g @vue/cli 安装

$ cnpm install -g @vue/cli //g表示全局安装

5. 下图检测出来已安装

三、使用vue create命令创建项目

$ vue create vue-cli4

四、启动项目

$ cd vue-cli4     //进入项目目录下
$ npm run serve   //启动项目

出现下图表示项目已运行成功并在浏览器访问：

五、项目结构介绍

// 用来存放用包管理工具下载安装的包的文件夹
node_modules
// 项目所有的公共资源
public
// 项目源文件
src
// 忽略git提交的文件
gitignore
// 转码器
babel.config.js
// 项目的所有依赖文件
package.json
// markdown文档
readme.md
// 文件的备注
yarn.lock