vuejs技术
利用vue-resource来请求api
利用vue-router来实现路由
利用vue中的组件化思想来实现每个页面
webpack基本打包演示步骤
1、将webpack安装成为全局包，npm install webpack -g
2、在cmd控制面板中，调用webpack指令给定两个参数 要打包的文件路径 要输出的文件路径
例如 webpack main.js build.js
浏览器无法识别语法
无法识别require,modul.exports等语法,需要通过webpack打包工具打包
webpack.config.js文件
这个文件就是webpack的默认配置文件,默认的名称为:webpack.config.js,
将来只需要在cmd面板上执行webpack就会自动去查找webpack.config.js中的内容进行相关打包操作
module.exports = {
entry:"要打包的文件,如./src/app.js",
output: {
path: "./bin",
filename: "app.bundle.js"
}
}
利用webpack打包css文件
1、本身不支持css打包，其实是加载相关的loader来进来不同文件的打包处理
2、打包css,需要依赖于style-loader和css-loader
步骤：0、使用npm init初使化
1、利用npm安装好style-loader和css-loader
1)利用npm init初始化一个package.json文件
2）利用npm install style-loader css-loader --save-dev将这两个包在package.json中管理起来，
将来就算这个项目中的包删除了，也只需要利用npm install这个指令将package.json文件中存在的包自动安装好即可
2、在webpack.config.js中配置一下style-loader和css-loader，并且顺序一定是style-loader，再是css-loader
3、调用webpack
自动补全浏览器内核
autoprefixer-loader作用：可以自动在打包过程中将css写法加上不同浏览器内核的前缀达到不同浏览器的兼容
使用步骤：1、安装npm install autoprefixer-loader --save-dev
2、在webpack.config.js的css设定的地方，添加autoprefixer-loader，
注意要在style-loader和css-loader后面
利用webpack-dev-server和html-webpack-plugin实现页面刷新和自动打包
1、npm install webpack webpack-dev-server-dev,也可以再安装一次全局npm install webpack-dev-server -g
2、安装 html-webpack-plugin npm install html-webpack-plugin --save-dev(在内存中生成index.html，webpack-dev-server才能保证页面的实时刷新和打包)
3、配置webpack.config.js，在webpack.config.js最上方导入包var HtmlwebpackPlugin = require('htmll-webpack-plugin'),
plugins:[
new HtmlwebpackPlugin({
title:'index'//生成的页面标题
filename:'index.html' //生成的文件名称
template:'index1.html'//根据index1.html这个模板来生成（这个文件请你自己生成）
})
]
4、在package.json中配置dev:
"scripts":{
"dev":"webpack-dev-server --inline --hot --open --port 5200",
"build":"webpack"
}
5、在项目目录下打开cmd面板执行npm run dev即可完成自动打开浏览器，并且自动刷新的功能
在package.json里面的scripts中配置一下运行的命令
"scripts":{
"dev":"webpack-dev-server --inline --hot --open --port 5200"
}
--inline:自动刷新
--hot:热加载
--port指定监听端口为5200
--open:自动在默认浏览器中打开
--host:可以指定服务器的ip,不指定默认为127.0.0.1(localhost)
利用webpack将es6语法转换成es5语法
1、安装 npm install babel-core babel-loader babel-parset-es2015 babel-plugin-transform-runtime --save-dev
2、在webpack.config.js中的loader:[]中配置的参考格式：
{
test:/\.js$/,
loader:'babel?pressets[]=es2015'
}
利用webpack.config.js中的babel这个属性来配置会更好