Vue2學習之旅一：初始化項目搭建（不帶路由）

時間 2019-11-07

標籤 vue2 vue 學習之旅初始化項目搭建帶路简体版

原文原文鏈接

做者：心葉
時間：2018-04-25 16:33css

本篇最終項目文件Github地址：github.com/paper520/vue.quick/tree/V1html

Vue2學習之旅系列文章目錄vue

【不使用vue-cli搭建，由於那樣會遺落太多細節沒有說明】node

下面，咱們來一步步使用webpack搭建一個用來學習Vue2的環境，力求沒有冗餘的代碼，讓咱們開始吧！webpack

備註：後面的學習所有基於這個環境來進行！git

先來看看最終的項目結構：github

總體說明

(1)build/main.js和node_modules是自動生成的，先無視web

(2)package.json裏面是須要用到的node包和一些配置，內容以下：vue-cli

{
  "name": "vue.quick",
  "version": "0.0.0",
  "scripts": {
    "start": "node_modules/.bin/webpack-dev-server --inline --hot --port 20000",
    "release": "node_modules/.bin/webpack"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^6.4.1",
    "css-loader": "^0.28.11",
    "vue-loader": "^11.3.4",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "vue": "^2.2.6"
  }
}

既然是vue開發，所以vue包是必須的，webpack是打包框架，webpack-dev-server是服務器，vue-loader和babel-loader分別是用來解析.js和.vue文件的，餘下的都是這二個包依賴的。npm

上面的start和release分別是配置啓動服務器和打包的

（3）webpack.config.js是用來配置webpack的，先看看具體內容：

var webpack = require('webpack');
module.exports = {
    entry: ['./src/entry.js'],
    output: {
        path: __dirname,
        filename: 'build/main.js'
    },
    module: {
        loaders: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
};

入口文件是entry.js，打包的結果存放在main.js，而後配置瞭如何解析.vue和.js文件

（4）接着是index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue.quick</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="./build/main.js"></script>
    </body>
</html>

除了引入了最後打包的文件main.js外，請記住id='root'，姑且稱爲掛載點。

(5)最後還剩下二個文件沒有說了，先看看App.vue，這個叫作【單文件組件】，其實就是一個vue組件，看看內容（具體寫法先無視，後面會細說）：

<template>
    <span>
        {{ msg }}
    </span>
</template>

<script>
export default {
  data() {
    return {
      msg: "vue.quick - 基本版本代碼"
    };
  }
};
</script>

<style>
span {
  color: blue;
}
</style>

（6）最後一個，也就是打包入口文件entry.js，先看看內容：

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

//根對象
var vm = new Vue({
    //掛載點
    el: '#root',
    //啓動組件
    render: function (callback) {
        return callback(App);
    }
});

能夠簡單的理解，這就是一個vue對象，前面（5）說的組件被他使用了，具體的仍是後面細說。