Vue-第一个vue-cli项目
vue是官方给我们的一个脚手架
主要功能
统一目录结构
本地调试
热部署
单元测试
集成打包上线
好的，我们现在开始着手创建一个Vue-cli项目，具体的创建过程我就不做赘述了，重要的是，里面的东西怎么能如此的难懂
首先附上四个代码
我们可以看到，在这个方法里
在hello.js中，我们exports了一个方法，注意，只有exports之后，其他的js文件才能调用这个方法
hello.js
//暴露一个方法 exports.sayhai=function (){ document.write("<h1>狂神说</h1>") }
我们可以看到，我们在main.js中声明了一个变量hello，这个hello的值是hello.js文件，
若用java来解释的话，我的理解是，将hello这个类创建出来了，
由于我们将hello.js中的sayhi方法暴露出来了，所以，在main.js中可以直接调用这个方法
main.js
var hello = require("./hello");
hello.sayhai()
然后，我们将我们写的程序进行打包，先要设置打包的入口，也就是entry
然后设置我们打包的文件放在哪里，如果目录中没有，那么其会自动创建
webpack.config.js
module.exports = {
entry:'./module/main.js',
output:{
filename:"./js/bundle.js"
}
}
在运行完打包程序之后
我们会生成一个文件bundle.js
这是里面的内容
(()=>{var r={816:(r,t)=>{t.sayhai=function(){document.write("<h1>狂神说</h1>")}}},t={};(function e(o){var a=t[o];if(void 0!==a)return a.exports;var i=t[o]={exports:{}};return r[o](i,i.exports,e),i.exports})(816).sayhai()})();
可以看到，它将我们的代码降级了，然后综合了起来
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="dist/js/bundle.js"></script> </body> </html>
我们可以看到，我们的整个页面也就是引入了一个打包文件而已
