vue-cli脚手架的使用

vue-cli脚手架
https://cli.vuejs.org/zh/guide/installation.html

1. 简介

版本：2.x
vue-cli是一个vue脚手架，可以快速构造项目结构
vue-cli本身集成了多种项目模板：
    simple  很少简单
    webpack 包含ESLint代码规范检查和unit单元测试等
    webpack-simple 没有代码规范检查和单元测试
    browserify 使用的也比较多
    browserify-simple

2. 示例，步骤：
   2.1 安装@vue/cli (vue-cli)，配置vue命令环境

version ---- 2.9.6版本

npm install vue-cli -g  或者 yarn global add vue-cli
vue --version
vue list

version ---- @vue/cli 4.1.2 

npm install -g @vue/cli   
# OR
yarn global add @vue/cli  ,或者指定版本安装 yarn global add @vue/cli@3

可以安装一个桥接工具拉取 2.x 模板 (旧版本)

npm install -g @vue/cli-init
 `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
 vue init webpack-simple webpack-simple-web
 vue init webpack vue-cli2-demo

全局卸载 ：yarn global remove @vue/cli
2.2 初始化项目，生成项目模板

vue-cli
vue-cli 2语法：vue init 模板名  项目名  

@vue/cli 3 -4
语法：vue create 项目名

2.3 进入生成的项目目录，安装模块包

cd vue-cli2-demo
npm install

2.4 运行

vue-cli版本创建的项目：
npm run dev  //启动测试服务
npm run build //将项目打包输出dist目录，项目上线的话要将dist目录拷贝到服务器上

@vue/cli版本 创建的项目
npm run serve   //启动开发服务
npm run build   //将项目打包输出dist目录，项目上线的话要将dist目录拷贝到服务器上

ESLint是用来统一代码规范和风格的工具，如缩进、空格、符号等，要求比较严格

官网
2.5 使用图形化界面
你也可以通过 vue ui 命令以图形化界面创建和管理项目：
vue ui

三、模块化开发
2. axios模块化

npm install axios -S

vue-cli3-demo 项目里
使用axios的两种方式：
方式1：在每个组件中引入axios ,

    import axios from 'axios';
        getInfo(){
            axios.get('https://api.github.com/users/fly39244080').then((res)=>{
                console.log(res);
            })
         }

方式2：在main.js中全局引入axios并添加到Vue原型中

    import axios from 'axios';
    Vue.prototype.$axios = axios;
        getInfo(){
            this.$axios.get('https://api.github.com/users/fly39244080').then((res)=>{
                console.log(res);
            })
         }