使用 webpack 搭建 vue 开发环境-- --齐枭飞

项目上使用了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.jswebpack配置文件

1. 安装vue 和webpack

进入到 demo_project 目录下

npm install vue --save

npm install webpack --save

1. 添加webpack配置文件

module.exports = {

entry:'./src/index.js',

output: {

path: __dirname +'/dist',

filename:'bundle.js'

},

module: {

loaders: [{

test:/.css$/,

loader:'style!css'

}]

}

}

1. 添加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"

}

1. 新增html和js入口文件

/ src/index.js /

document.write('hello. webpack runs ok!')

1. 验证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文件

{{vueMsg}}

module.exports = {

data() {

return {vueMsg:'Vue hello world'}

}

}

strong{

}

在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节点

...

...

...

8.测试vue

根目录执行

npm start

打开index.html，看到红色背景的Vue hello world