使用webpack搭建vue开发环境
最近几天项目上使用了vue.js作为一个主要的开发框架,并且为了发布的方便搭配了webpack一起使用。CSS框架使用的是vue-strap(vue 对bootstrap控件做了封装)
这篇文章主要总结一下具体搭建的过程,和途中遇到的一些问题的解决办法
主要用到的工具
搭建步骤
1. 首先建立项目的目录结构
- demo_project/
- dist/
webpack生成的文件
- src/
源代码文件
- img/
图片文件
- css/
css文件
- js/
js文件
- components/
定义的vue组件
- views/
视图文件,其实也是vue组件
- img/
- webpack.config.js
webpack配置文件
- dist/
2. 安装vue 和webpack
# 进入到 demo_project 目录下
|
3. 添加webpack配置文件
module.exports = {
|
4. 添加package.json文件
# cd 到 demo_project 目录下
|
最后生成的package.json
文件如下
{
|
5. 新增html和js入口文件
<!-- src/index.html -->
|
/* src/index.js */
|
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
#根目录执行
|
打开index.html,看到红色背景的Vue hello world
学习时的痛苦是暂时的 未学到的痛苦是终生的