https://cn.vuejs.org/v2/guide/installation.html
http://element.eleme.io/#/zh-CN/guide/design
https://www.infoq.cn/article/04b2Z4HmV4xshXJ*bSFO
Function.prototype.apply是开发任何插件的核心。 使用SPA框架开发的前提是打包与编译，也就是掌握npm和webpack、babel，相当于java的maven和jenkins以及jcp规范之于实现的选择（ASF还是jboss旗下），只不过是早期版本，坑比较多。 npm npm是javascript的包管理器，使用Node.js开发，所以使用npm的前提是安装Node.js，但是npm和Node.js又是由不同的团队开发，发布频率也不同。Node.js安装实例会在没有全局权限的位置安装一个npm。npm推荐安装一个node版本管理器，windows下推荐nvm https://github.com/coreybutler/nvm-windows/releases。 npm常用命令 查看nodejs版本 node -v 查看npm版本 npm -v 安装最新版本npm npm install npm@latest -g npm中央仓库 https://www.npmjs.com/ npm国内镜像 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org registry设置npm包的中央仓库。 npm环境配置 npm package分两类，全局、本地。maven就没有这一区分，默认本地。一般来说需要cli的比如grunt CLI，安装全局的。 安装包 npm install <package_name> install可以简写i 不带报名时：会安装package.json 中dependencies列出的所有模块。带--production标记或者NODE_ENV环境变量为production是，则不安装devDependencies中的模块。 带包名时：该命令会在当前目录的node_modules（如果不存在，会自动创建）下载包以及依赖的包。如果当前目录下不存在package.json文件，则默认会安装最新版本的包，否则安装语义上(https://docs.npmjs.com/getting-started/semantic-versioning)满足package.json中声明的包的最新版本。包在node_modules中之后，就可以使用require使用了，如下： // index.js var lodash = require('lodash'); var output = lodash.without([1, 2, 3], 1); console.log(output); 然后在cmd下执行node index.js就会输出[2, 3]。 如果没有正确安装lodash的话，就会报下列错误： module.js:340 throw err; ^ Error: Cannot find module 'lodash' npm install主要选项参考https://docs.npmjs.com/cli/install。 默认情况下，npm install安装后会将依赖添加到package.json文件的dependencies。如需额外控制，声明如下： -P, --save-prod: 这是默认选项，添加到dependencies. -D, --save-dev: 添加到devDependencies. -O, --save-optional: 添加到optionalDependencies. --no-save: 不添加到dependencies. -g全局安装包。 删除本地包 npm uninstall --save lodash 一定要带上--save，他会一并删除package.json中的dependencies。 删除全局包 npm uninstall -g <package> package.json是管理本地安装的npm包的最佳方式，其完整的结构参考https://docs.npmjs.com/files/package.json。其作用是： 列出依赖的包 build可重复执行 使用语义兼容的规则声明包版本 package.json中的关键属性： main：模块的主入口，一般是index.js。在其他模块通过require("foo")加载它时，将返回main中导出的对象，该文件要相对于包目录的根。 bin：如果模块需要提供cli，则配置命令名和脚本的对应关系在此处。 scripts:设置在包的不同生命周期阶段执行的脚本。参考https://docs.npmjs.com/misc/scripts config：设置环境变量。 dependencies：声明运行时依赖。 devDependencies：编译、开发时依赖。 npm run是npm run-script <command> [--silent] [-- <args>...]的简写。用于执行package.json中scripts里定义的任何命令。如果没有command，则列出所有命令。npm run可以支持所有内置的npm start, npm test等，后者可以说是快捷方式。 npm init用于创建package.json 通常管理package.json中依赖的最好方式是使用npm install的-P或-D选项。 "devDependencies" : { "my_test_framework": "^3.1.0" } 上述中的^表示从3.1.0开始的子版本。
npm查看仓库中特定包的所有版本，如下：
D:GMPsrcfrontebs-k3c>npm view jquery versions
[ '1.5.1',
'1.6.2',
'1.6.3',
'1.7.2',
'1.7.3',
'1.8.2',
'1.8.3',
'1.9.1',
...
]
安装特定版本：
npm install jquery@1.7.2
模块与包的区别 package是由package.json描述的一个目录或文件。 module是可以被Node.js' require()的任何目录或文件，最简单可以是一个js文件，所以package一般是module，module不一定是package。 npm环境配置 配置的读取优先级是命令行，环境变量（以npm_config_开头，大小写不敏感，命令行选项-分隔单词，环境变量则是_），npmrc（分别是/path/to/my/project/.npmrc，$HOME/.npmrc，$PREFIX/etc/npmrc，/path/to/npm/npmrc） 查看当前配置 npm config ls -l 更改配置(会更改配置文件) npm config set <key> <value> [-g|--global] webpack webpack是一个模块打包器，主要将js打包后供浏览器使用。webpack目前主要在用的版本是2.x和3.x，详细参考https://www.npmjs.com/package/webpack。可以使用npm install --save-dev webpack安装，安装后可以使用cli或者api使用。核心功能包括： *打包 ES Modules, CommonJS, AMD 模块，甚至他们的组合； *可以创建一个单独的文件或者多个片段，这些文件可以在运行时异步加载； *依赖在编译时解析，以便减少运行时大小； *可以在编译时预处理文件，比如TypeScript转JavaScript，图片转Base64等； *高度模块化的插件系统； webpack demo打包入门参考https://webpack.js.org/guides/getting-started/ ES2015中标准化了import/export，虽然大部分浏览器不支持，但是webpack原始支持它们。webpack编译时会将它们转换为浏览器支持的语法。webpack还支持其他的模块语法，具体可以参考https://webpack.js.org/api/module-methods/，不过他不会处理其他任何语句，如果使用了 ES2015外的特性，必须通过加载器系统配置编译器比如Babel。 webpack除了内置核心功能外，最厉害的就是他的插件系统了，绝大部分外围功能都是通过外部插件来实现的。 在webpack中，可以通过加载器预处理文件，这样可以将静态资源从js中剥离出来，加载器使用Node.js编写。加载器主要分为文件、JSON、编译、模板、CSS、测试与LINT类、框架（vue、angular）这几大类。 webpack 2开箱即用支持ES2015+, CommonJS, AMD模块。 大部分的实际项目都比较复杂，所以webpack通过配置文件来设置各种规则，这比在命令行中设置各种选项好得多。webpack有很多的选项，其中4个最核心的概念是： entry:指定了webpack应该用来建立内部依赖树的模块。进入入口点之后，webpack就会找出入口依赖的模块和库。 output:指定输出文件名以及目录。 loaders:加载器使得webpack可以处理js之外的文件。从本质上来说，webpack加载器会将所有类型的文件转换为模块。module.rules用于声明加载器。加载器本身也是一个js模块。 plugins:插件是webpack的核心。webpack本身也是基于插件系统构建的。插件和加载器有一部分重合的功能，但是用途比加载器更加广泛。要使用插件，需要使用require()导入，并将其加入plugins 数组。大部分插件都有自定义选项。 devServer：设置本地HTTP开发服务器。 比如： 在项目中创建一个文件webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: '[hash].bundle.js', path: path.resolve(__dirname, 'dist') } }; 完整的配置可以参考：https://webpack.js.org/configuration/output/ filename中有几个常见的模板会被用于生产： [hash] [chunkhash] [name] [id] [query] 运行 npx webpack --config webpack.config.js 输出如下： D:webpack-demo>npx webpack --config webpack.config.js C:UsersadminAppDataRoaming pm ode_moduleswebpackinwebpack.js Hash: 5462c58b0b68cf397893 Version: webpack 3.8.1 Time: 670ms Asset Size Chunks Chunk Names bundle.js 544 kB 0 [emitted] [big] main [0] ./src/index.js 303 bytes {0} [built] [2] (webpack)/buildin/global.js 488 bytes {0} [built] [3] (webpack)/buildin/module.js 495 bytes {0} [built] + 1 hidden module webpack默认会查找当前目录下的webpack.config.js，也可以通过--config指定其他配置文件，一般生产中会区分dev,test,prod。 实际中，一般不会独立运行webpack命令，而是集成在npm run XX中。如下： { "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "./src/index.js", "scripts": { "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "lodash": "^4.17.4" } } D:webpack-demo>npm run build > webpack-demo@1.0.0 build D:webpack-demo > webpack Hash: 5462c58b0b68cf397893 Version: webpack 3.8.1 Time: 666ms Asset Size Chunks Chunk Names bundle.js 544 kB 0 [emitted] [big] main [0] ./src/index.js 303 bytes {0} [built] [2] (webpack)/buildin/global.js 488 bytes {0} [built] [3] (webpack)/buildin/module.js 495 bytes {0} [built] + 1 hidden module 在webpack之前，通常使用grunt/gulp将图片、字体等从src移动到dist目录，JavaScript 同理。但是webpack会动态打包所有依赖，除了js外，webpack通过加载器可以同样处理其他任何资源。webpack使用正则表达式确定应该查找那个文件以及使用哪个加载器处理。其格式如下： module: { rules: [ { test: /.css$/, use: [ 'style-loader', 'css-loader' ] } ] } 其中Rule.loader是Rule.use: [ { loader } ]的快捷方式，Rule.loaders是Rule.use的别名。一个Rule可以分为三部分：条件、结果、子Rules。 内置了对json文件加载器的支持。 webpack支持配置文件使用TypeScript、CoffeeScript、JSX和Babel编写。 默认情况下，webpack打包输出的文件名是不会自动更新到index.html的，这样就会导致无法使用hash名，为了解决这个问题，HtmlWebpackPlugin就出现了。HtmlWebpackPlugin默认会生成自己的index.html，即使dist目录下已经存在了，所有选项参见https://github.com/jantimon/html-webpack-plugin。 webpack-dev-server是一个简单的web服务器，可以热加载变更，其所有配置可参考https://webpack.js.org/configuration/dev-server/。 一般来说，应该对开发和生产使用不同的webpack配置文件。 webpack与node.js模块的差异在于，webpack可以通过下列任何方式描述模块依赖关系： ES2015 import CommonJS require() AMD define和require css/sass/less文件中的@import语句 样式表中的图片url webpack支持的模块类型（已经有对应的loader）包括： CoffeeScript TypeScript ESNext (Babel) Sass Less Stylus webpack从resolve.modules环境变量或者初始化参数中指定的所有目录搜索模块。 vue,react,angularjs的选择就像是j2ee标准实现,spring,struts之间的选择
因为不使用jquery了，自然要有一个替代ajax请求的库，不至于使用原生的XMLHttpRequest，所以最常见的就是axios了，在vue里面，早期是vue-resource，不过已经不维护了。
参考：axios在ie下的兼容性问题 vue webpack es6-promise
参考：2018 web前端应该学什么 https://zhuanlan.zhihu.com/p/32193591
参考：axios，https://segmentfault.com/a/1190000008470355?utm_source=tuicool&utm_medium=referral，https://www.npmjs.com/package/axios
vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。https://vuex.vuejs.org/zh-cn/intro.html
vue-router：https://router.vuejs.org/zh-cn/
element ui：
mint ui：
[Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
原因:在data中没有定义一个name, 致错
解决方法:在data中定义一个name=" ",