vue-cli的安装与配置与运行

1.什么是vue-cli

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。

2.安装和使用vue-ci

(1)vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：

npm install -g @vue/cl

(2)基于vue-ci快速生成工程化的vue项目：

vue create 项目的名称

(3)vue-cli创建项目的步骤截图：

1）选择第三个，表示手动选择要素信息

2）选择一些要素

 3）选择vue的版本

 4）选择less

 5）选择配置存放的位置

6） 最后就会生成一个基本的vue项目目录了，如下图所示：

node_modules: 存放所有的第三方包文件； 

public中：

        favicon.ico:就是网页加载的时候，那个小图标；

        index.html：网站的唯一首页

 src：项目的源代码目录，也就是程序员所写代码的地方；

        assets文件夹：存放项目中用到的静态资源文件，例如：css样式表，图片资源

        components文件夹：程序员封装的、可复用的组件，都要放到 components 目录下

        main.js 是项目的入口文件。整个项目的运行，要先执行 main.js

        App.vue 是项目的根组件。

babel.config.js:babel的配置文件

gitinore:git的忽略文件

package.json:包管理配置文件

3.vue项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

其中：

（1）App.vue 用来编写待渲染的模板结构

（2）index.html 中需要预留一个 el 区域

（3） main.js 把 App.vue 渲染到了 index.html 所预留的区域中