您的位置：首页 > 产品设计 > UI/UE

webpack-dev-server+vue构建开发环境（一）

2016-07-27 23:27 961 查看

刚到公司实习，接触的到webpack+vue的环境，对于以前没有在开发中使用过AMD等规范，对nodeJs也不熟悉的我来说，这环境简直就是陌生。我想知道这样的环境是怎么搭起来的。今天终于一步一步地搭好了环境。网上的快捷搭环境方法我试过，对于想了解搭环境的这个过程的我，这种快速简单的方法反而使这个环境的搭建变得复杂难懂。

1. 首先npm init，初始化package.json

2. 安装webpack-dev-server(全局+本地）

3. 新建webpack.config.js文件,新建入口文件index.js，并手动配置如下：

var webpack=require('webpack');
module.exports={
plugins:[],
entry:{
index:'./index.js'
},
output:{
path:'./dist/bin',
filename:'build.js'
},
module:{
loaders:[
{test:/\.css$/,loader:'style-loader!css-loader'},
{test:/\.vue$/,loader: 'vue'}
]
},
resolve:{
root:'C:/Users/mzz/angular',
extension:['','.js','.json','.scss']
}
};

查找网上资料，弄清楚每个属性有什么用途，比如entry用于配置入口文件。

5. 引入vue（npm install vue –save-dev)

6. 实例一个vue对象，如下：

//index.js
var Vue=require('vue');
var app = Vue.extend({
template: '<div>A custom component!</div>'
});
Vue.component('my-app', app)

//index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id='app'>
<my-app></my-app>
</div>
<script type="text/javascript" src="build.js"></script>
</body>
</html>

7.运行webpack-dev-server(命令：webpack-dev-server)

8.浏览器中输入http://localhost:8080/，即可看见A custom component!。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： webpack vue 开发环境

相关文章推荐

新的分享

章节导航