使用 VueJS 全家桶做一个简单的 SPA 应用
2017-08-09 本文已影响0人
sissi110
参考网址
（反正一直失败）
webpack
(之前在react方面也用过，安装配置很简单)
- 全局安装webpack（自己之前弄过，忽略）
$ npm i webpack -g - package.json全局配置文件初始化，描述项目
npm init - 通过npm安装项目依赖项
cnpm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-ru
ntime vue-loader vue-html-loader vue-hot-reload-api css-loader style-loader webpack webpack-dev-server --save-dev
npm install进行一次性安装
安装vue
cnpm install vue@latest --save
Paste_Image.png
项目目录初始化，手动新建一些文件夹和文件
Paste_Image.png
-
在你的项目目录中去依赖webpack，使用命令
npm install webpack –save-dev。其中–save：模块名将被添加到dependencies，可以简化为参数-S。 –save-dev: 模块名将被添加到devDependencies，可以简化为参数-D。 再去查看package.json，会发现多了一项“devDependencies”: { “webpack”: “^1.13.1” } -
webpack配置开始
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, './app'),
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
}
};
//下面的我验证是错误的
module.exports = {
entry: './app',
output: {
path: './build/',
filename: 'bundle.js'
}
};
index.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<script src="./build/bundle.js"></script>
</body>
</html>
接下来,
入口文件index.js:
var h2 = document.createElement('h2');
h2.innerHTML = 'HELLO VUEJS';
document.body.appendChild(h2);
直接在 cmd 中运行 webpack ,就能看到页面显示了一个h2标签,内容是 HELLO VUEJS.
自此，简单的打包入口文件成js就学会了。
- 使用热加载webpack-dev-server。最大的好处是模块热替换，在前端代码变动的时候无需整个刷新页面，只把变化的部分替换掉。详情参考webpack-dev-server 使用命令
npm install webpack-dev-server -g进行全局安装。使用命令webpack-dev-server可以运行webpack-dev-server。[具体参考下面]
安装 Webpack-dev-server
npm i webpack-dev-server --save-dev
--save-dev会讲安装后的包放在package.json 的devDependencies,一个放在dependencies里面, 产品模式用dependencies，开发模式用devDep.
Paste_Image.png
Paste_Image.png
安装完成之后, 继续往 webpack.config.js 中添加配置.
devServe: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true
}
再向 package.json 中"script"添加配置
"script": {
"start": "webpack-dev-server --hot --inline"
}
.json 格式的文件里无论键名还是值都必须使用双引号.
写好之后在cmd 中输入 npm run start 跑出一串字之后, 打开 localhost:8080, 就能看到结果, 然后我们随意修改一下文本的内容保存一下, 会发现浏览器内的文字自动地刷新了. MAGIC
