入坑VUE的一点心得

前言

本人专业做后台，有一定前端基础，最近想不通学了几天VUE，由于入坑过程有点小心酸，
想想还是记下来吧，一则是总结，说的不一定对，再则看看能不能给后入坑的人一点帮助吧

1.关键地址，具体作用后面会提到：

vue官网：https://cn.vuejs.org/
node官网：http://nodejs.cn/
vue-demo：https://github.com/PanJiaChen/vue-element-admin.git
饿了么框架官网:https://element.eleme.cn/#/zh-CN/component/quickstart

ps:最近某讯课堂VUE课程免费，可以看看。。

2.安装主要过程

1.装node.js，装node的目的在于用它的npm命令
2.装VUE，通过npm命令装Vue，但是由于npm下载资源是走国外，于是通过npm装个cnpm，这个下载走淘宝镜像，速度还行,npm能用的命令，cnpm基本也有
3.装webpack，这东西专门用来建包打包，初次安装会消耗很多时间…感觉是用不用另说，先给你下载个几百M的模块组件。。
4.开始构建包，要填写一系列的东西，敞开填，一路next，手速越快越好，因为后面都可以在一个叫package.json的文件里面修改，一个一个敲yes，真的很嫌麻烦。。
5.构建完毕之后，进入包目录，cmd命令 npm run dev，然后进入浏览器，地址：localhost:8080，传统套路，先来一个helloworld…

3.VUE的机制

1.vue的核心机制就是对一个单页面的html进行操作，抓住一个id=“app"的div元素，史上称其为全局唯一VUE对象,vue做的事情就是可劲的操作里面的东西。
2.任意HTML代码可以当成模版使用，一般模版越简单越好，这样够灵活，一个模版可以N多个地方使用
3.<div id="app">模版1,模版2,....模版N</div>，把每一个模版当成一个对象,具体操作dom的时候，本质其实就是Jquery里面的$(”#app").html(vue-html)，替换内容，这里的vue-html就是模版之间的组合最后得出的html
4.数据双向绑定

4.依赖配置

根目录下有一个文件package.json，这个json总括了这个项目的基本信息，创建的时候填的东西都在了
和maven pom.xml感觉类似的东西

{
  "name": "vue-element-admin", //项目名
  "version": "4.2.1", //版本号
  "description": "备注:A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
  "author": "Pan <panfree23@gmail.com>", 作者
  "license": "MIT", 许可证
  "scripts": {  /**包含哪些脚本*/
    "dev": "vue-cli-service serve",/*dev启动脚本*/
    "build:prod": "vue-cli-service build",/**生产打包*/
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",/**代码规范**/
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",/**测试*/
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",/**使用svg图片需要用这个处理*/
    "new": "plop"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },
  "keywords": [
    "vue",
    "admin",
    "dashboard",
    "element-ui",
    "boilerplate",
    "admin-template",
    "management-system"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/PanJiaChen/vue-element-admin.git"/**代码仓库地址*/
  },
  "bugs": {
    "url": "https://github.com/PanJiaChen/vue-element-admin/issues"/**有BUG往这提**/
  },
  "dependencies": {/**依赖的组件*/
    "axios": "0.18.1",
    "clipboard": "2.0.4",
    "codemirror": "5.45.0",
    "driver.js": "0.9.5",
    "dropzone": "5.5.1",
    "echarts": "4.2.1",
    "element-ui": "2.13.0",
    "file-saver": "2.0.1",
    "fuse.js": "3.4.4",
    "js-cookie": "2.2.0",
    "jsonlint": "1.6.3",
    "jszip": "3.2.1",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "path-to-regexp": "2.4.0",
    "screenfull": "4.2.0",
    "script-loader": "0.7.2",
    "showdown": "1.9.0",
    "sortablejs": "1.8.4",
    "tui-editor": "1.3.3",
    "vue": "2.6.10",
    "vue-count-to": "1.0.13",
    "vue-router": "3.0.2",
    "vue-splitpane": "1.0.4",
    "vuedraggable": "2.20.0",
    "vuex": "3.1.0",
    "xlsx": "0.14.1"
  },
  "devDependencies": {/**dev环境时使用的依赖，打包时不会被包含在里面**/
    "@babel/core": "7.0.0",
    "@babel/register": "7.0.0",
    "@vue/cli-plugin-babel": "3.5.3",
    "@vue/cli-plugin-eslint": "^3.9.1",
    "@vue/cli-plugin-unit-jest": "3.5.3",
    "@vue/cli-service": "3.5.3",
    "@vue/test-utils": "1.0.0-beta.29",
    "autoprefixer": "^9.5.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "23.6.0",
    "chalk": "2.4.2",
    "chokidar": "2.1.5",
    "connect": "3.6.6",
    "eslint": "5.15.3",
    "eslint-plugin-vue": "5.2.2",
    "html-webpack-plugin": "3.2.0",
    "husky": "1.3.1",
    "lint-staged": "8.1.5",
    "mockjs": "1.0.1-beta3",
    "node-sass": "^4.9.0",
    "plop": "2.3.0",
    "runjs": "^4.3.2",
    "sass-loader": "^7.1.0",
    "script-ext-html-webpack-plugin": "2.1.3",
    "serve-static": "^1.13.2",
    "svg-sprite-loader": "4.1.3",
    "svgo": "1.2.0",
    "vue-template-compiler": "2.6.10"
  },
  "engines": {/**软件版本要求**/
    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },
  "browserslist": [/**浏览器版本要求**/
    "> 1%",
    "last 2 versions"
  ]
}

5.各种引用

1.各种花式引用…

/**第一种，引入的是node_modules文件夹下的*/
import 'normalize.css/normalize.css'
/**第二种，引入node_modules文件下一个组件的模版，
 这个ElementUI只是一个命名，你随意取
 因为这个模版定义的时候，使用的是export default，没有指定名字，用的时候再定义
*/
import ElementUI from 'element-ui';
/**第三种，相对路径引入*/
import './styles/element-variables.scss'
/**第四种，@等价于src*/
import '@/styles/index.scss' // global css
/**第五种，通过变量引入，使用方法require.context读取资源，放到req里面*/
const req = require.context('./svg', false, /\.svg$/);
/**
	第六种，指定名称引入，必须带{}，因为定义的时候指定了它的名字validUsername
	export function validUsername(str) {
	  const valid_map = ['admin', 'editor']
	  return valid_map.indexOf(str.trim()) >= 0
	}

*/
import { validUsername } from '@/utils/validate'

6.启动顺序

以main.js为入口，进行各种组件的加载，一条链上的东西…

7.重要的组件

1.Vue #app元素本身
2.router 路由，控制请求跳转
3.axios 异步请求，类似ajax

每一种组件可以看成是一种js，不同功能…

9.总结

几天时间，踩坑无数…总算是能照着demo写出点东西了，要吐槽一下这个demo，功能太全，各模块一环扣一环，启动时扣着token鉴权，扣着过滤器，扣着UI样式加载，鉴权里面又扣着配置，套路太深。。
看着这中国人写的全英文注释，当你真的慢慢理解这个demo了之后，发现VUE确实是挺好用的，但是从纯后端入手VUE，还是有一定挑战的…