vue-脚手架cli

一，简介

首先我们先了解vue的相关的几个方面的模块

• vue：用于构建用户界面的前端开发框架
• vue-cli：vue的项目构建、开发工具
• vue loader：一个webpack的loader，将vue组件的开发形式转为单文件
• vue router：vue的路由管理器插件
• vuex：vue的状态管理插件

二，cli(脚手架)

认识脚手架是什么？
vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
vue脚手架的作用是用来自动一键生成vue+webpack的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦。

关于安装cli
确保node环境：安装vue-cli需要在node环境下安装，所以首先确保自己安装了node，检查自己电脑是否安装了node ,并且确认node的版本不低于8.9

全局安装vue-cli

npm install -g vue-cli

npm下载的速度有点慢，可以去下载cnpm，提高下载速度

安装完成后输入vue -V 查看是否安装成功

使用vuecli脚手架

<template>
  <div>
  <p class="msg">{{msg}}</p>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        msg:'HelloWorld'
      }
    }
  }

</script>

<style>
.msg{
  color:red;
  font-size: 30px;
}
</style>

通过创建一个vue文件，写法和vue组件差不多，然后在控制下运行vue文件，这样一个简单的文件就写出来了。

vue目录结构及其对应作用
通过vue-cli搭建一个vue项目，会自动生成一系列文件，而这些文件具体是怎样的结构、文件对应起什么作用，可以看看下面的解释：

     build                                         ——项目配置文件夹
     build.js                                         ——项目环境配置代码
     check-version.js                          ——检查node-npm版本的插件
     utils.js                                          ——项目配置变量
     vue-loader.conf.js                        ——在.vue文件中用于处理css的规则
     config                         ——环境变量的配置
     dev.env.js                     ——开发环境变量配置
     index.js                         ——webpack相关变量配置（开发环境接口代理在这里配置）
     prod.env.js                    ——发布环境变量配置
     node_modules          ——当前工程下载的第三方模块插件包（npm下载和管理的模块所在的位置）
     src                              ——源码目录
     assets                           ——静态资源文件（会被webpack构建并打包的）
     logo.png                         ——logo图片属于静态资源
     components                  ——vue公共组件
     HelloWorld.vue               ——一个组件文件(.vue)
     router                             ——路由配置
     index.js                            ——具体路由代码
     App.vue                         ——vue的页面入口，打开的页面就是这个文件
     main.js                    ——webpack打包的入口文件，加载各种组件、配置、变量
     static                            ——纯静态资源文件夹，不会被webpack打包
 　 babelrc　　　　　　——es6语法编译配置
     editorconfig　　　　　　——定义代码格式
     gitignore　　　　　　——git上传时需要忽略的文件的列表
     postcssrc.js　　　　　　——postcss-loader模块配置文件，用于加载css
     index.html　　　　——项目真正的入口（app.vue需要嵌入在html里）
     package.json　　　　——项目基本信息(包括一些指令等)
     package-lock.json　　　　——项目依赖包版本，锁定文件
     README.md　　　　　　——项目说明文件（使用markdown语法编写）