环境
环境是windows ，没办法公司只有这个环境
安装并创建项目
好消息是直接从 node 官网 就能下载，然后无脑安装即可
创建一个文件夹 做为工作目录G:\aleenlee\vuetest
npm init
无脑回车 得到 package.json 内容如下
{
"name": "vuetest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
修改一下 scripts
"scripts": {
"go": "webpack"
},
安装插件
需要安装一些奇怪的插件
npm install vue webpack babel-cli babel-loader babel-preset-es2015 html-webpack-plugin --save-dev
当然这些是不够用的，先装这些 那些报错加那些
准备需要用的文件
1.创建一个 webpack.config.js文件 内容如下
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack=require("webpack");
module.exports =
{
entry:
{
"index":__dirname+'/src/jssrc/index.js',
},
output: {
path: __dirname+'/src/webapp/js', //输出文件夹
filename:'[name].js' //最终打包生成的文件名(just 文件名，不带路径的哦)
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
},
externals: {
},
module:{
loaders:[
{test:/\.js$/,loader:"babel",query:{compact:true}},
//这里肯定要加入n个loader 譬如vue-loader、babel-loader、css-loader等等
]
},
plugins:[
new HtmlWebpackPlugin({
filename: __dirname+'/src/webapp/index.html',//目标文件
template: __dirname+'/src/html/index.html',//模板文件
inject:'body',
hash:true,
chunks:["index"]
})
]
}
2.创建 另一个文件 .babelrc
{
"presets": ["es2015"]
}
3 创建文件夹及文件，
G:\aleenlee\vuetest\src\html\index.html
index.html 内容开始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "app">{{name}}</div>
</body>
</html>
index.html 内容结束
G:\aleenlee\vuetest\src\js\index.js
index.js内容开始
import Vue from "vue";
let app ={
el:"#app",
data:{
name:"aleen"
}
};
new Vue(app);
index.js内容结束
G:\aleenlee\vuetest\src\webapp\
注意index.js 这里会报错,直接敲代码即可,复制过去可能会不能用
完成创建之后显示效果如下
项目路径图
在html 文件夹下写页面
js下写操作代码
控制台输入
npm run go
错误
错误
需要在webpack.config.js中修改一下 {test:/.js$/,loader:"babel
-loader",query:{compact:true}},
修改后重新运行 webapp 文件夹下就会显示一个index.html 运行这个文件即可得到
显示效果
路径可能不一样 需要使用工具运行webapp/index.html 文件
添加热部署
因为每次修改都要重新运行 npm run go实在太麻烦，使用热部署的方法来解决这个问题
npm install webpack-dev-server --save-dev
就能自己安装了， 在安装的同时我们修改一下 webpack.config.js
output: {
publicPath: "http://127.0.0.1:8080/",
path: __dirname+'/src/webapp/js', //输出文件夹
filename:'[name].js' //最终打包生成的文件名(just 文件名，不带路径的哦)
},
plugins:[
new HtmlWebpackPlugin({
// filename: __dirname+'/src/webapp/index.html',//目标文件
filename:"index.html",
template: __dirname+'/src/html/index.html',//模板文件
inject:'body',
hash:true,
chunks:["index"]
}),
]
修改这两处即可
package.json 中 添加 热部署
"dev":"webpack-dev-server --inline --hot --content-base ./src/webapp"
image.png
打开浏览器访问 http://127.0.0.1:8080/ 页面显示
image.png
随意修改一下 src\js\index.js
name:"lucifer"
}
到页面中 已经变成
image.png
到这里 热部署已经成功了
后来测试的时候发现好多loader 需要加载
例如 css-loader、 vue-loader、babel-loader 、vue-template-compiler 都需要安装一下
网友评论