森度的博客

Post

前端项目框架

框架或库

react
react是一个JavaScript库，用于开发数据不断变化的大型应用程序，解决dom频繁操作的问题，使前端组件化。实现了前端界面的高效率高性能开发。
官网教程：https://facebook.github.io/react/docs/hello-world.html
Vue
vue是2016年最火热的前端框架，编写风格简洁，容易入门，具有良好的中文支持（开发者是中国人）。它借鉴了react的思想，同时性能上有所提升。(不支持ie8)
英文官网教程：https://vuejs.org/v2/guide/
中文官网教程：http://cn.vuejs.org/v2/guide/
github：https://github.com/vuejs/vue
各种组件：https://github.com/vuejs
ES6
目前浏览器未能全面支持es6

开发工具

babel
babel是javascript转换器，可以利用babel将es6转化成es5，这样浏览器才能运行react或vue。
babel官网：https://babeljs.io/
webpack
webpack基于nodejs，是一个用于前端工程化的构建工具，同类型的构建工具还有Grunt、Gulp。
官网教程：https://webpack.js.org/guides/

package.json

下边是搭建一个vue项目的package.json，供参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
{
  "name": "es",
  "version": "1.0.0",
  "description": "this is es",
  "author": "cuican",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  },
  "dependencies": {
    "bulma": "^0.3.1",
    "font-awesome": "^4.7.0",
    "node-sass": "^4.5.0",
    "vue": "^2.0.1",
    "vue-bulma-collapse": "^1.0.3",
    "vue-datepicker": "^1.3.0",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.0.3",
    "vue-validator": "^3.0.0-alpha.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.25.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.17.2",
    "json-loader": "^0.5.4",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "sass-loader": "^6.0.2",
    "semver": "^5.3.0",
    "shelljs": "^0.7.4",
    "url-loader": "^0.5.7",
    "vue-loader": "^9.4.0",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  }
}

Comments