技术分享--Vue

1.依赖

开发依赖

vue-cli

• CLI (@vue/cli)： 是一个全局安装的 npm 包，提供了终端里的 vue 命令。

vue create # 命令行创建项目
vue ui # 图形化创建项目

• CLI插件：CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。

vue add eslint # 添加eslint插件库
vue add cli-plugin-eslint # 与上述代码等效

• CLI 服务 ：(@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

# package.json
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

# 运行脚本
npm run serve / npx vue-cli-service serve # 启动项目(开发环境、热加载)
npm run build / npx vue-cli-service build # 构建项目(生产环境)
npx vue-cli-service help
npx vue-cli-service inspect # 审查一个 Vue CLI 项目的 webpack config

nodejs和npm

• npm组成结构：远程库、网站、客户端
• package.json文件
• node_module文件夹
• 相关命令参考(npm中文网)

npm install# 安装项目所需依赖(package.json文件)
npm install xxx # 安装库(非全局)

webpack

• webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。多个module.js–>一个bundle.js
• entry（入口）
• output（出口）
• loader（加载器）：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。
• plugin（插件）：插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

eslint

• 代码规范化插件

生产依赖

vue

vue-router

vuex

element和minui

axios

mock

2.开发理念

• 前后端分离
• spa单页面
• 组件化
• 模块化
• 工程化
• 开发环境与生产环境

3.html、css、JavaScript

• html和html5
• css和css3
• es5和es6