初始的終結與結束的開始

最開始接觸vue項目搭建是從vue-cli開始，模板式操作，一鍵搞定，幾乎可以無縫進入代碼開發階段，這對新人來說很友好，馬上就能夠一邊看教程，一邊測試代碼，我當初就是這么學vue的（順便提一下，我在學習vue之前沒接觸過任何前端框架，連Nodejs都沒接觸過，以前做前端的時候只會html+css/sass+js這種形式），但是這對新人也不好，因為模板搭建的東西往往很全面，全面就意味著東西很多，至于項目是怎么運行的，那些模板生成的文件都代表什么意思，在項目中起到什么作用，等等等，對新人來說一時半會兒很難搞清除，尤其是像我這總沒接觸過nodejs的人來說更甚。

所以在學習了一段時間的vue之后，我決定回到最初，開始學習如何從零搭建vue項目。

在搭建vue項目之前先了解一下Nodejs項目，因為vue項目其實就是Nodejs項目，了解Nodejs項目不僅有利于學習了解vue項目，并且更具有擴展性和通用性。

一個Nodejs項目的創建過程，大致分為 1.創建項目目錄，2.初始化項目，3.安裝依賴模塊，4.進入開發過程

mkdir myproject   # 創建項目目錄
cd myproject      # 進入項目目錄
npm init          # 初始化項目

接下來會引導你創建一個名為package.json的文件，它是Nodejs項目所必須的，里面記錄了項目名稱，版本，描述，關鍵詞，作者，腳本命令，生產環境，開發環境等等。關于package.json的完整字段信息可以百度。

輸入代碼開始安裝模塊
npm install <package>僅安裝模塊，
npm install <package> --save安裝模塊并在生產環境dependencies中記錄包名和版本，
npm install <package> --save-dev安裝模塊并在開發環境devDependencies中記錄包名和版本。

這就好比，剛剛初始化Nodejs項目相當于干細胞，根據安裝的模塊和依賴不同，就會成為不同的項目。好，接下來，我們就在這個基礎Nodejs項目上去搭建vue項目

Nodejs項目的簡單測試

這里先測試一下如何在Node中渲染html，熟悉Node的同學可以跳過。在項目目錄下添加一個入口文件index.html，我們的vue項目需要在html中進行渲染，然后在index.html中隨便寫的東西，方便我們看到效果，比如<h1>hello world</h1>?

|-- build
|   |-- run.js
|-- node_modlues
|   |-- ...
|-- index.html
|-- package.json

在package.json的scripts字段中添加npm的命令縮寫，node ./build/run.js，這是一條node語句，表示使用 node 運行run.js

"scripts": {"start": "node ./build/run.js"},

./build/run.js內容

var express = require('express')
var path = require('path')
var app = express()app.get('/', function (request, response) {var root = path.resolve('.')response.sendFile( root + '/index.html')
})var server = app.listen(8080, '127.0.0.1', function () {var host = server.address().addressvar port = server.address().portconsole.log("Server running at http://%s:%s", host, port)
})

我們用到了express模塊，這是一個很基礎，但也很重要的Nodejs框架，先安裝npm insall express --save-dev

接下來我們使用命令npm run start運行程序，控制臺會顯示如下信息

D:\wwwroot\myproject>npm run start> myproject@1.0.0 start D:\wwwroot\myproject
> node ./build/run.jsServer running at http://127.0.0.1:8080

是不是感覺和vue-cli搭建的模板工程很像，然后我們去瀏覽器輸入http://127.0.0.1:8080就能看到我們在index.html中寫的內容了，更改內容，然后刷新頁面再看看效果。

從零開始

（從零開始的意義：大家可以放棄之前 Nodejs項目的測試 所做的更改，重新初始化一個項目，不用安裝任何模塊，一切從這里開始）

Nodejs項目的運行大致如上，但和我們的目標還相去甚遠，要搭建vue項目，首先得配置開發環境（即安裝模塊）。

首先是安裝 vue 和 webpack 模塊，vue是我們項目的核心，這個沒啥說的。webpack是JavaScript的打包模塊，它將瀏覽器不能直接運行的語言打包處理成適合的格式以供瀏覽器使用。因為vue是發布所需要的，所以使用以下命令

npm install vue --save
npm install webpack --save-dev

但是光有這兩個模塊是不夠的，

• webpack 4.x 之后將 cli 單獨拎了出來，所以還需要webpack-cli模塊，
• 在vue項目中，我們使用了.vue單文件形式，要加載這些單文件我們需要vue-loader模塊，
• 為了轉化ES6高級語法，所以需要 babel-loader @babel/core @babel/preset-env 模塊
• 需要加載css，需要 css-loader模塊，（如果要使用sass，那么還需要node-sass 和 sass-loader）
• 需要引用圖片或者其他資源文件，則需要 url-loader 或 file-loader
• 每次更新代碼后，我們都需要重新編譯以便查看效果，這樣會很麻煩，使用webpack提供的開發工具webpack-dev-server可以幫助我們在代碼發生變化后自動編譯代碼
• 最后我們還需要渲染html的插件html-webpack-plugin

綜上，我們還需要安裝如下模塊

npm install vue-loader --save-dev
npm install webpack-cli webpack-dev-server --save-dev
npm install babel-loader @babel/core @babel/preset-env --save-dev
npm install css-loader --save-dev
npm install url-loader --save-dev
npm install html-webpack-plugin --save-dev

webpack開發模式

安裝好模塊后，回顧Nodejs項目，我們現在需要添加npm命令縮寫，webpack配置文件

在package.json的scripts字段中添加npm的命令，（使用webpack-dev-server運行）

"scripts": {"dev": "webpack-dev-server --inline --progress --config webpack.config.js"},

在項目目錄下新建webpack配置文件webpack.config.js，配置文件代碼

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {// 配置 webopack 的入口 / 出口文件entry: {app: './src/main.js'},output: {filename: 'bundle.js',path: path.join(__dirname, 'dist')},// 配置 webpack 的服務器信息devServer: {// 默認配置為http://localhost:8080},// 定義 webpack 的模式mode: 'development',// 配置 loader 載入規則module: {rules: [{test: /\.vue$/,loader: 'vue-loader'},{test: /\.js$/,loader: 'babel-loader'},{test: /\.css$/,use: ['vue-style-loader','css-loader']},{test: /\.(jpg|png|bmp)$/,use : 'url-loader'}]},// 添加解析文件后綴，添加后在引入文件時可以省略后綴只寫文件名resolve: {extensions: ['*', '.js', '.vue', '.json']},// 配置插件項plugins: [// vue-loader 15.x 之后，必須引入這個插件才能正常工作new VueLoaderPlugin(),// 用來指定渲染的模板文件new HtmlWebpackPlugin({template: './index.html'})]
}

配置好webpack后我們需要添加其他文件內容，項目結構如下

|-- node_modlues
|   |-- ...
|-- src
|   |-- App.vue
|   |-- main.js
|-- index.html
|-- package.json
|-- webpack.config.js

./index.html內容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title>
</head>
<body><div id="app"></div>
</body>
</html>

./src/main.js內容

import Vue from 'vue'
import App from './App'new Vue({el: '#app',render: h => h(App)
})

./src/App.vue內容

<template><div id="app">Vue App</div>
</template><script>
export default {name: "App"
}
</script><style>
#app{color: gray;
}
</style>

輸入命令npm run dev運行程序，就可以看到效果啦~~~，然后修改代碼測試一下vue，看看效果

webpack編譯打包

到這一步其實就相對容易了，webpack本身就是用于編譯打包，webpack的配置文件也寫好了，只需要使用webpack打包即可

添加build命令，然后使用npm run build命令編譯打包

"scripts": {"dev": "webpack-dev-server --inline --progress --config webpack.config.js","build": "webpack --config webpack.config.js"},

打包完成后，會在項目目錄下生成/dist文件夾，所有編譯好的文件都在該目錄下

后記

寫到這里，一個基礎的簡單的vue項目其實就已經搭建好了，整個過程與其說是 如何從零搭建Vue項目 ，不如說是 如何使用webpack搭建項目 ，所以在今后的學習中不妨分成兩個板塊去學習

• 使用 webpack 進行項目搭建，了解 webpack 的配置與命令，推薦閱讀 webpack 官方中文文檔
• 如何配置 vue-loader ，推薦閱讀 Vue Loader 官方中文文檔

了解熟悉 webpack 可以讓我們快速搭建前端框架項目或是自定義項目