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

使用webpack搭建vue开发环境

2016-08-13 17:29 1096 查看
最近几天项目上使用了vue.js作为一个主要的开发框架，并且为了发布的方便搭配了webpack一起使用。CSS框架使用的是vue-strap(vue 对bootstrap控件做了封装)
这篇文章主要总结一下具体搭建的过程，和途中遇到的一些问题的解决办法

主要用到的工具

Vue

webpack

vue-strap

vue-router

搭建步骤

1. 首先建立项目的目录结构

demo_project/

dist/ 
webpack生成的文件


src/ 
源代码文件


img/ 
图片文件


css/ 
css文件


js/ 
js文件


components/ 
定义的vue组件


views/ 
视图文件，其实也是vue组件


webpack.config.js 
webpack配置文件


2. 安装vue 和webpack

# 进入到 demo_project 目录下
npm install vue --save
npm install webpack --save

3. 添加webpack配置文件

module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style!css'
}]
}
}

4. 添加package.json文件

# cd 到 demo_project 目录下
npm init #跟着步骤一步一步的完成

最后生成的
package.json
文件如下

{
"name": "vuedemo",
"version": "1.0.0",
"description": "a vue demo with webpack",
"main": "webpack.config.js",
"dependencies": {
"vue": "^1.0.4",
"webpack": "^1.12.2"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"webpack --color  --progress"
//注意，这是我生成后加上的。用于执行webpack.如果webpack 安装在全局可以直接行动webpack进行打包
},
"author": "frank"
}

5. 新增html和js入口文件

<!-- src/index.html -->
<html>
<head>
<meta charset="utf-8">
</head>

<body>
<script type="text/javascript" src="../dist/bundle.js"></script>
</body>

/* src/index.js  */
document.write('hello. webpack runs ok!')

6. 验证webpack是否成功

npm start

在浏览器中打开index.html .看到
hello. webpack runs ok!
表示webpack成功了运行了


后面就是使用vue的loader加载的vue文件了.下次再写
接着来安装 vue-loader


7.安装vue-loader

安装

npm install vue-loader --save

修改配置文件

//webpack.config.js
loaders[
...
{
test:/\.vue$/,
loader:'vue'
}
...

在views目录下创建测试的vue文件

<!-- hello.vue -->
<template>
<strong>{{vueMsg}}</strong>
</template>
<script>
module.exports = {
data() {
return {vueMsg:'Vue hello world'}
}
}
</script>
<style scoped>
strong{

}
</style>

在index.js文件中引入vue

//index.js
var Vue = require('vue')
var helloVue = require('./views/hello.vue')
new Vue({
el: "body",
components: {
hello: helloVue
}
})

修改index.html加入body中加入demo的vue节点

...
<body>
<hello></hello>
...
</body>
...

8.测试vue

#根目录执行
npm start

打开index.html，看到
红色背景的Vue hello world
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航