1.nodejs的方式:commonjs var xx =require() modules.exports=xxxx
注意:这种方式引入模块,路径会遵循node的规则,和js的src路径规则不同。
规则参考:http://www.ruanyifeng.com/blog/2015/05/require.html
2.ES6的import和export关键字 和commonjs等价,会被babel转换成方式1
3.AMD方式: require([依赖],function(注入){ })
4.CMD 和commonjs差不多
webpack可以识别以上所有模块载入方式,同时还有自带的require.ensure() 以及webpack2又有import( ) 方法
总之,这都是为了打包文件的。使用commonjs的1方式,这些文件被打包在一个总的js文件里,如果想单独打包,要使用AMD方式或者commonjs异步的方式或者自带的方式。
babel仅仅将es6的import语法转译成commonjs的require语法,真正对语句操作的是webpack,如果不安装webpack,会报错method require is undefined.
其次,webpack可以识别并转换尾缀为vue的文件。vue文件又叫单文件组件,优点是可以把js和html和css放在一个文件中,并且html可以直接以html的形式书写,而不是在组件的js中拼接字符串。需要webpack+vue-loader进行处理。
vue-cli干了什么:既然vue需要搭配webpack打包干活,于是就有了vue-cli,是一个带有配置webpack(或者相似功能的browserify)的vue脚手架(完整的项目目录,以及package.json脚本配置等)
vuex是干什么的:和上面没有关系,vuex是让组件更好通信的,管理共用的状态。
vue组件:两种创建方式分别是全局和局部。注意传入vue.extend()返回的构造器,或直接传入options对象都是可以的,后者会默认调用vue.extend()
注意组件的data必须是一个函数(为了避免data被共用)
关于package.json npm start = npm run start的缩写 其实npm run后面跟的字段主要取决于package.json文件中scripts下的配置,它是一个命令的快捷运行方式,必须配置"start" : node ./app.js 才可以使用npm run启动。同样也可以配置dev然后用npm run dev启动
在package.json的脚本中的命令是自带环境变量的,比如webpack命令会自动去找项目目录下node_modules下本地安装的webpack,而如果在命令行中调用又如果没有全局安装webpack,必须要带上webpack在项目文件夹中的路径,才能调用webpack。