使用vue+webpack從零搭建項目

時間 2019-12-10

標籤使用 vue+webpack vue webpack 搭建項目简体版

原文原文鏈接

vue到如今已經成爲一個熱門的框架，在項目實踐當中，若是想要建立一個新項目，一般都會使用vue-cli的腳手架工具，毋容置疑可以方便不少，不少東西也不須要本身親自去配置。都知道，腳手架實際上是vue結合webpack去實現的。在這裏，我就想寫一篇從零建立vue結合webpack項目的文章，跟你們學習分享。css

1、首先來整理個最簡單的目錄結構html

首先須要個index.html的最終打開頁面，而後有一個main.js的js入口文件，還有一個vue後綴的vue文件（vue組件化開發少不了的vue後綴文件），還要一個package.json的工程文件（記錄你項目名稱、依賴、配置等信息的文件，這裏用npm init生成），最後固然少不了的webpack配置文件。node

到這裏第一步完成。webpack

2、安裝webpack及webpack-dev-serverweb

npm install webpack webpack-dev-server --save-dev（或cnpm install webpack webpack-dev-server --save-dev）vue-cli

運行webpack-dev-server --inline --hot --port 8083npm

3、安裝各類依賴。json

首先是各類各樣的loder和babel編譯所須要的包，這裏簡單列舉一下：api

vue-loader、vue-html-loader、css-loader、vue-style-loader、babel-loader等loader和vue-hot-reload-api

babel-core、babel-plugin-transform-runtime、babel-preset-es201五、babel-runtime（具體哪一個什麼功能自行查找了，不是範圍內……）

一次性所有安裝

cnpm install vue-loader vue-html-loader css-loader vue-style-loader babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime vue-hot-reload-api --save-dev

（因爲版本問題，以避免帶來問題，推薦使用我找的版本，也是試了很久……）

貼一下package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --port 8083"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-runtime": "^6.11.6",
    "css-loader": "^0.25.0",
    "vue-hot-reload-api": "^1.3.2",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^8.5.4",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "vue": "^2.6.7"
  }
}

package.json

別忘了安裝vue……

cnpm install vue --save，ok，依賴準備就緒

4、編寫webpack.config.js

入口文件是main.js，輸出文件bundle.js，同時配置好vue文件的loader和js的loader，代碼以下

module.exports={
    entry:'./main.js',

    output:{
        path:__dirname,
        filename:'bundle.js'
    },
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    },
    module:{
        loaders:[
            {test:/\.vue$/, loader:'vue'},
            {test:/\.js$/, loader:'babel', exclude:/node_modules/}
        ]
    },
    babel:{
        presets:['es2015'],
        plugins:['transform-runtime']
    }
};

5、編寫其餘頁面

index.html頁面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el:'#app',
    components:{App},
    template: '<App/>'
});

App.vue

<template>
    <h1>{{msg}}</h1>
</template>
<script>
    export default{
        data(){
            return {
                msg:'welcome Vue ^_^'
            }
        }
    }
</script>
<style>
    body{
        background: #ccc
    }
</style>

6、運行及查看

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。