使用webpack搭建vue開發環境

本文轉載自查看原文 2016-08-13 17:29 15346 vue

最近幾天項目上使用了vue.js作為一個主要的開發框架，並且為了發布的方便搭配了webpack一起使用。CSS框架使用的是vue-strap(vue 對bootstrap控件做了封裝)
這篇文章主要總結一下具體搭建的過程，和途中遇到的一些問題的解決辦法

主要用到的工具

搭建步驟

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用vue-cli+webpack搭建vue開發環境從零開始使用 Webpack 搭建 Vue3 開發環境使用Webpack搭建React開發環境二、Electron + Webpack + Vue 搭建開發環境及打包安裝使用webstorm 搭建 vue 開發環境 React+webpack開發環境的搭建 windows環境下搭建vue+webpack的開發環境以及問題解決使用vue-cli搭建項目開發環境 Windows環境搭建Vue開發環境 windows環境搭建Vue開發環境