(精华)2020年7月12日 vue 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` 的运行效果将会跟 `[email protected]` 相同
 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);
            })
         }

3. 为自定义组件添加事件

二、 Element UI

1. 简介

Element UI是饿了么团队提供的一套基于Vue2.0的组件库，可以快速搭建网站，提高开发效率
    ElementUI  PC端
    MintUI 移动端

官网

2. 快速上手

2.1 安装elment ui

cnpm install element-ui -S

2.2 在main.js中引入并使用组件

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' //该样式文件需要单独引入
Vue.use(ElementUI);
这种方式引入了ElementUI中所有的组件

2.3 在webpack.config.js中添加loader

CSS样式和字体图标都需要由相应的loader来加载，所以需要style-loader、css-loader
默认并没有style-loader模块，所以需要单独安装
cnpm install style-loader --save-dev

2.4 使用组件

2.5 使用less

安装loader，需要两个：less、less-loader
cnpm install less less-loader -D
在webpack.config.js中添加loader    

3. 按需引入组

3.1 安装babel-plugin-component

cnpm install babel-plugin-component -D  

3.2 配置.babelrc文件

"plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-default"
    }
]]]

3.3 只引入需要的插件