使用 webpack 搭建 vue 開(kāi)發(fā)環(huán)境-- --齊梟飛
項(xiàng)目上使用了vue.js作為一個(gè)主要的開(kāi)發(fā)框架，并且為了發(fā)布的方便搭配了webpack一起使用。CSS框架使用的是vue-strap(vue 對(duì)bootstrap控件做了封裝)
這篇文章主要總結(jié)一下具體搭建的過(guò)程，和途中遇到的一些問(wèn)題的解決辦法主要用到的工具
Vue
webpack
vue-strap
vue-router
搭建步驟
- 首先建立項(xiàng)目的目錄結(jié)構(gòu)
demo_project/
dist/webpack生成的文件
src/源代碼文件
img/圖片文件
css/css文件
js/js文件
components/定義的vue組件
views/視圖文件，其實(shí)也是vue組件
webpack.config.jswebpack配置文件
- 安裝vue 和webpack
進(jìn)入到 demo_project 目錄下
npm install vue --save
npm install webpack --save
- 添加webpack配置文件
module.exports = {
entry:'./src/index.js',
output: {
path: __dirname +'/dist',
filename:'bundle.js'
},
module: {
loaders: [{
test:/.css$/,
loader:'style!css'
}]
}
}
- 添加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"
//注意，這是我生成后加上的。用于執(zhí)行webpack.如果webpack 安裝在全局可以直接行動(dòng)webpack進(jìn)行打包
},
"author":"frank"
}
- 新增html和js入口文件
/ src/index.js /
document.write('hello. webpack runs ok!')
- 驗(yàn)證webpack是否成功
npm start
在瀏覽器中打開(kāi)index.html .看到hello. webpack runs ok!表示webpack成功了運(yùn)行了
后面就是使用vue的loader加載的vue文件了.下次再寫(xiě)
接著來(lái)安裝 vue-loader
7.安裝vue-loader
安裝
npm install vue-loader --save
修改配置文件
//webpack.config.js
loaders[
...
{
test:/.vue$/,
loader:'vue'
}
...
在views目錄下創(chuàng)建測(cè)試的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節(jié)點(diǎn)
...
...
...
8.測(cè)試vue
根目錄執(zhí)行
npm start
打開(kāi)index.html，看到紅色背景的Vue hello world