vue学习之看vue项目

1.配置文件：package.json

以一个json对象 ，以json的形式声明项目的基本信息，

1.1字段

2. node_modules npm 下载的资源

3.public assets 存放静态资源文件

4. components 页面零部件

5.router 路由配置

6.views 页面视图

7.app.vue 主组件

8.main.js 入口文件

9.package.json 资源插件下载版本记录

1.1.1 scripts

运行脚本命令的npm命令行的缩写

"scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging"
  }

1.1.2 dependencies / dev Dependencies

dependencies: 指定了项目所依赖的模块

devDependencies: 指定项目开发所需要的模块

每个对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围

"dependencies": {
    "@microsoft/signalr": "^6.0.2",
    "@riophae/vue-treeselect": "0.4.0",
    "axios": "^0.21.4",
    "clipboard": "2.0.8",
    "core-js": "3.6.5",
    "echarts": "^5.1.1",
    "echarts-gl": "^2.0.8",
    "echarts-wordcloud": "^2.0.0",
    "element-ui": "2.15.6",
    "file-saver": "2.0.1",
    "fuse.js": "3.4.4",
    "highlight.js": "^11.2.0",
    "js-beautify": "1.10.2",
    "js-cookie": "2.2.0",
    "jsencrypt": "3.0.0-rc.1",
    "less-loader": "^6.0.0",
    "mavon-editor": "^2.9.1",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "path-to-regexp": "2.4.0",
    "quill": "1.3.7",
    "screenfull": "4.2.0",
    "sortablejs": "1.8.4",
    "vue": "2.6.12",
    "vue-count-to": "1.0.13",
    "vue-cropper": "0.4.9",
    "vue-router": "3.4.9",
    "vue-seamless-scroll": "^1.1.23",
    "vuedraggable": "2.20.0",
    "vuex": "3.6.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.4.4",
    "@vue/cli-plugin-eslint": "4.4.4",
    "@vue/cli-service": "4.4.4",
    "babel-eslint": "10.1.0",
    "babel-plugin-dynamic-import-node": "2.3.3",
    "chalk": "4.1.0",
    "connect": "3.6.6",
    "eslint": "6.7.2",
    "eslint-plugin-vue": "6.2.2",
    "lint-staged": "8.1.5",
    "runjs": "4.4.2",
    "sass": "1.32.13",
    "sass-loader": "10.1.0",
    "script-ext-html-webpack-plugin": "2.1.3",
    "svg-sprite-loader": "4.1.3",
    "vue-template-compiler": "2.6.12"
  }

vue 只关注视图层

soc关注点分离原则 ：

html+css+js 视图： 给用户看 刷新后台给的数据

网络通信：axios

页面跳转：vue-router

状态管理：vuex

Vue-UI: ICE

vm:数据双向绑定

vue 是一套构建于用户界面的渐进式框架