正常情況下我們都是使用vue-cli腳手架來搭建的vue的前端框架，但是這個(gè)的缺點(diǎn)是對初學(xué)者來說不能夠很好的理解框架的運(yùn)行及搭建過程直焙，下面把個(gè)人在不使用腳手架的情況下搭建前端框架的過程寫下來，希望能幫助到有需要的童鞋砂轻！

注意：以下環(huán)境均是在windows下操作的：

第一步：安裝奔誓，node

直接在官方下載，然后和普通軟件安裝一樣的搔涝，版本：v8.9.1

第二步：安裝完后厨喂，建立自己的項(xiàng)目文件目錄，

本人是建在：e:/github/drive-p庄呈，

為了演示蜕煌，重新建立一個(gè)演示目錄作為項(xiàng)目目錄：E:\test_wsx\demo

第三步：啟動(dòng)dos? 快捷鍵： win+r，然后：cmd? 進(jìn)到DOS命令行面板抒痒，輸入：node -v? 幌绍，檢查node 的安裝情況，

如果出現(xiàn)版本號(hào)故响，則表示安裝成功傀广，如下圖：

第四步：在DOS面板進(jìn)入到剛建的項(xiàng)目目錄，輸入命令行：

e:

cd? ?test_wsx/demo

如下圖：

第五步：初始化項(xiàng)目依賴：

輸入命令行：npm init -y? ,主要目的是建立一個(gè)項(xiàng)目依賴的json文件彩届，這個(gè)文件用于管理后面的依賴包

安裝項(xiàng)目依賴package.json????

npm : node 的一個(gè)shell命令伪冰，用于安裝和卸載node包及相關(guān)插件

然后用編輯器打開剛剛建立的項(xiàng)目文件夾做為項(xiàng)目的根目錄，個(gè)人用的是vscode

打開后發(fā)會(huì)現(xiàn)多了一個(gè)文件樟蠕，如下圖：

初始化后的目錄

第六步：安裝webpack包

命令行：npm install --save-dev webpack??

注意：webpack 我們安裝的時(shí)候帶上：--save-dev 參數(shù)贮聂，目的是讓依賴包只在本地開發(fā)環(huán)境安裝靠柑，在線上環(huán)境不會(huì)安裝，如果需要在線上進(jìn)行安裝依賴的吓懈，可以使用命令：npm install --save webpack,? 順便說下歼冰，卸載依賴包的命令是：npm uninstall --save / --save-dev? webpack??

安裝成功，顯示+webpack@3.10.0

安裝成功后耻警，可以看package.json文件隔嫡，會(huì)多出來個(gè)devDependencies? 的屬性，如下：

如果安裝有報(bào)錯(cuò)的甘穿，有可能是權(quán)限問題腮恩，可以：以管理員身份進(jìn)行安裝，具體步驟：

點(diǎn)擊windos菜單鍵,然后出現(xiàn)下圖温兼，在：命令提示符上右鍵秸滴，以管理員身份運(yùn)行，然后進(jìn)行DOS募判，安裝

devDependencies? 屬性荡含，表示本地依賴包

webpack 是一個(gè)平臺(tái)，要運(yùn)行webpack 需要插件的配合届垫，那么接下來我們統(tǒng)一把需要的相關(guān)插件列出來并一 一進(jìn)行安裝：

????"babel-core": "^6.26.0",? ? //? es6 轉(zhuǎn)換核心插件内颗，具體可去官網(wǎng)查看

? ? "babel-loader": "^7.1.2",? // js 的loader 插件，主要是模塊化js

? ? "babel-plugin-transform-runtime": "^6.23.0",? // 提供一個(gè)沙盒插件敦腔，具體說明均澳，可參看：https://segmentfault.com/a/1190000009065987

? ? "babel-preset-env": "^1.6.1",? //esr 預(yù)處理插件

? ? "babel-preset-stage-2": "^6.24.1",? // es 的stage - 2 的插件，具體可參看stage-0? ?到? ?stage - 4 的區(qū)別符衔，然后就可以理解了

? ? "chalk": "^2.3.0",? ?//? 文本樣式化插件

? ? "child_process": "^1.0.2",? ? //node 子進(jìn)程包

? ? "clean-webpack-plugin": "^0.1.17",? ?//? 清除內(nèi)容插件

? ? "css-loader": "^0.28.7",? // css 的模塊化插件

? ? "extract-text-webpack-plugin": "^3.0.2",? ?// 提取獨(dú)立的文件插件

? ? "html-webpack-plugin": "^2.30.1",? ?// html 自動(dòng)構(gòu)建插件

? ? "less": "^2.7.3",? // less 的編譯包? 找前，如果不使用less 的，可以不裝

? ? "less-loader": "^4.0.5",? // less 的模塊化插件, 不使用less的判族，可以不裝

? ? "ora": "^1.3.0",? ?//分割器躺盛，

? ? "rimraf": "^2.6.2",? ?// 刪除插件

? ? "semver": "^5.4.1",? // 版本檢查插件

? ? "shelljs": "^0.7.8",? // shell 命令插件

? ? "style-loader": "^0.19.1",? //? style? 標(biāo)簽 插件

? ? "uglifyjs-webpack-plugin": "^1.1.6",? ?// 壓縮插件

? ? "url-loader": "^0.6.2",? //? 一般用于圖片的地址，可轉(zhuǎn)換為base64格式

? ? "webpack-dev-middleware": "^2.0.3",? ?// 中間件形帮，用于熱重載? HRM

? ? "webpack-dev-server": "^2.9.7",? ?//? webpack 的本地服務(wù)器槽惫， 也可以HRM

? ? "webpack-hot-middleware": "^2.21.0"? ?//? 中間件，用于熱重載辩撑，HRM

? ? "express": "^4.16.2",? ?// 提供服務(wù)器端的中間件? 和HRM的中間件一起界斜，做到HRM

以下插件安裝為 --save 的線上依賴，看過vue的都熟悉吧合冀！

? ? "vue": "^2.5.13",? ?

? ? "vue-loader": "^13.6.2",

? ? "vue-router": "^3.0.1",

? ? "vue-template-compiler": "^2.5.13",

? ? "vuex": "^3.0.1"

以上是我們接下來需要的一些插件及node 包各薇，后續(xù)還需要的一步一步的可以再完善

可以先把這些插件全部安裝了，也可以邊用邊安裝君躺！

第七步：開始構(gòu)建服務(wù)器環(huán)境峭判，先讓程序跑起來

有兩種方式开缎，一種是用webpack-dev-server來完成，一種是用：express + webpack-dev-middleware +??webpack-hot-middleware? 來完成

這兩種方式都可以實(shí)現(xiàn)HRM林螃，腳手架用的是第二種方式奕删，我們兩種都可以嘗試一下！

第一種：webpack-dev-sever

要讓webpack-dev-server跑起來疗认，就需要對webpack 進(jìn)行配置急侥，我們先用最原始的寫法，即在根目錄建立一個(gè)webpack.config.js的配置文件

些時(shí)的目錄

現(xiàn)在的目錄結(jié)構(gòu)是這樣的侮邀，其中：package-lock.json 是在安裝了依賴后生成的文件，這個(gè)文件的主要作用就是確保你安裝的包的依賴關(guān)系贝润，保證在下次進(jìn)行安裝的時(shí)候绊茧，依賴關(guān)系 依然正確！

webpack.config.js 新建好以后打掘，我們就可以做一些配置了

先簡單配置如下：

簡單的配置

其中：

entry ?: ? 表示項(xiàng)目的入口文件华畏，這個(gè)文件主要表示整個(gè)項(xiàng)目的依賴關(guān)系的入口，webpack會(huì)根據(jù)這個(gè)入口來加載所有的項(xiàng)目中的文件尊蚁，包括：js,css,image,html等亡笑，這個(gè)就相當(dāng)于我們的單入口頁面

devServer ?: ? ? ? 是webpack-dev-server 的一個(gè)配置項(xiàng)，port : 表示端口横朋，hot : 是否熱重載

現(xiàn)在配置好了仑乌，我們還需要建立一個(gè)入口文件，index.js,我們就直接建在根目錄下面琴锭，目錄結(jié)構(gòu)：

目錄結(jié)構(gòu)

接下來晰甚，我們再對命令行做個(gè)修改，打開package.json文件决帖，里面有個(gè)scripts屬性厕九，我們做個(gè)如下配置：

package.json新添加一個(gè)配置行

scripts：表示命令行

然后接下來就可以啟動(dòng)服務(wù)器了

在DOS系統(tǒng)里面輸入：npm start?

結(jié)果

如果顯示以上這種輸出結(jié)果，表示服務(wù)器啟動(dòng)成功地回，然后打開瀏覽器扁远，在地址欄中輸入：

http://localhost:8083

出現(xiàn)以下結(jié)果：

瀏覽器結(jié)果

這個(gè)時(shí)候，已經(jīng)可以通過地址進(jìn)行訪問了刻像，但是因?yàn)楦夸浵旅鏇]有任何可以顯示的有效的web文件畅买，所以會(huì)顯示出當(dāng)前 的目錄，那么接下來在根目錄新建一個(gè)index.html文件,里面輸入一些內(nèi)容细睡，然后再看效果：

目錄結(jié)構(gòu)及index.html的內(nèi)容

保存后皮获，刷新瀏覽器

結(jié)果

這時(shí)候，一個(gè)最簡單的前端服務(wù)器框架已經(jīng)搭建好了纹冤，如何結(jié)合vue呢洒宝？

第一步：先建立文件的結(jié)構(gòu)目錄

這個(gè)目錄可以根據(jù)自己的喜好來建购公！

下面是我自己建的目錄：

vue的目錄

對比上面的文件目錄，新增了：

src這個(gè)文件夾雁歌，下面放了三個(gè)目錄：page, router, static, 兩個(gè)文件：index.js, app.vue, ?上面的index.js 移入到src 里面了

index.html 不變 ??

src ： 這個(gè)目錄的主要作用就是把所有的前端頁面都放里面宏浩，其中： page : ?用于存放 前端 的模板文件， page 下面的com 目錄存放公共的 模板文件靠瞎，如：通常的header,footer 等比庄， ?

static ： 目錄主要存放靜態(tài)文件：包括：圖片，css,等 ??

rotuer：目錄 用于存放路由

app.vue：是vue的入口模板文件 ?

index.js ： 就是入口文件

目錄建好后乏盐，接下來就是放入內(nèi)容的時(shí)候了佳窑，首先來配置 ?webpack.config.js

?webpack.config.js 的代碼貼在下面： ?

///////////////=============開始==================///////////////

const path = require('path')

const htmlPlugin = require('html-webpack-plugin')

const webpack = require('webpack')

module.exports = {

? ? // 入口文件

? ? entry:'./src/index.js',?

? ? //編譯輸出配置

? ? output: {

? ? ? ? path: path.resolve(__dirname + './dist'),? //目錄

? ? ? ? filename: 'bundle.js',? //文件名

? ? ? ? publicPath: '/'? ? //根目錄

? ? },

? ? devServer:{

? ? ? ? port:8083,? ///端口

? ? ? ? hot:true? //是否熱重載

? ? },

? ? resolve:{

? ? ? ? extensions: ['.js', '.vue'],? //js 和 vue 文件在import導(dǎo)入的時(shí)候不需要帶擴(kuò)展

? ? ? ? alias: {

? ? ? ? ? ? 'vue$': 'vue/dist/vue.esm.js',? //vue官方指定寫法，如果不寫這個(gè)父能，則運(yùn)行的時(shí)候會(huì)提示

? ? ? ? ? ? '@': path.resolve(__dirname, 'src')? //給src目錄起個(gè)別名@ 神凑，引用src目錄的時(shí)候，可用@替代

? ? ? ? }

? ? },

? ? // 下面是loader的配置

? ? module:{

? ? ? ? rules: [

? ? ? ? ? ? {

? ? ? ? ? ? ? ? test: /\.js/,

? ? ? ? ? ? ? ? use: ['babel-loader'],?

? ? ? ? ? ? },{

? ? ? ? ? ? ? ? test: /\.vue$/,

? ? ? ? ? ? ? ? use: ['vue-loader']

? ? ? ? ? ? },{

? ? ? ? ? ? ? ? test: /\.css$/,

? ? ? ? ? ? ? ? use: ['css-loader']

? ? ? ? ? ? },{

? ? ? ? ? ? ? ? test: /\.less$/,

? ? ? ? ? ? ? ? use: [

? ? ? ? ? ? ? ? ? ? "css-loader",

? ? ? ? ? ? ? ? ? ? "less-loader"

? ? ? ? ? ? ? ? ]

? ? ? ? ? ? },{

? ? ? ? ? ? ? ? test: /(\.jpg|\.png|\.jpeg|\.gif)$/i,

? ? ? ? ? ? ? ? loader: 'url-loader',

? ? ? ? ? ? ? ? options:{

? ? ? ? ? ? ? ? ? ? limit: 1024,

? ? ? ? ? ? ? ? ? ? name: '[name]-[hash:7].[ext]'

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ]

? ? },

? ? // 插件的配置

? ? plugins:[

? ? ? ? new htmlPlugin({

? ? ? ? ? ? filename: 'index.html',

? ? ? ? ? ? template: './index.html'

? ? ? ? }),

? ? ? ? new webpack.HotModuleReplacementPlugin()

? ? ]

};

///////////////==============結(jié)束=================///////////////

index.js ? 入口文件的代碼 貼下：

///////////////==============開始=================///////////////

import Vue from 'vue'

import vueRouter from 'vue-router'

import App from './app'

import router from './router/'

/* 使用vuerouter */

Vue.use(vueRouter);

//實(shí)例化vue

new Vue({

? ? el: '#root',? //掛載點(diǎn)

? ? router,? // 路由

? ? template: '', //模板

? ? // 子組件

? ? components:{

? ? ? ? App

? ? }

});

///////////////==============結(jié)束=================///////////////

app.vue ?入口模板的代碼如下

///////////////===============開始================///////////////

?<template>

? ? <router-view />

</template>

export default {

? data(){

? ? ? return {

? ? ? }

? }

}

///////////////==============結(jié)束=================///////////////

在router 目錄下文件：index.js , ?routes.js,代碼 如下：

///////////////===============開始 ?index.js================///////////////

import Router from 'vue-router'

// ./routes ?是一個(gè)目錄何吝，當(dāng)import 導(dǎo)入的時(shí)候溉委，會(huì)自動(dòng)導(dǎo)入 目錄下的index.js

import routes from './routes'

export default new Router({

? ? mode: 'hash',

? ? base: '/',

? ? routes: routes

})

///////////////==============結(jié)束=================///////////////

///////////////===============開始 ?routes.js================///////////////

import Index from '@/page/index'

export default [

? ? {

? ? ? ? path: '/',

? ? ? ? component: Index? ? ? ? ? ?

? ? },{

? ? ? ? path: '/index',

? ? ? ? component: Index

? ? }

];

///////////////==============結(jié)束=================///////////////

page 目錄下 ?index.vue ?的代碼如下

///////////////===============開始================///////////////

? ?<template>

? ? <div>{{index}}</div>

</template>

export default {

? data(){

? ? ? return {

? ? ? ? ? index: 'hello , this is dddindex'

? ? ? }

? }

}

///////////////==============結(jié)束=================///////////////

index.html ?的代碼如下：

///////////////===============開始================///////////////

index.html

///////////////==============結(jié)束=================///////////////

所有代碼貼完，然后運(yùn)行 ?： npm start ?

用瀏覽器打開爱榕，如下：

首頁成功

剩下的就是加入css等進(jìn)行頁面美化了瓣喊，可以參照vue 的來寫