平時(shí)基于vue開(kāi)發(fā)過(guò)程中，我們大多數(shù)時(shí)候選擇使用官方腳手架搭建開(kāi)發(fā)環(huán)境懂版，但是各種工具版本不固定鹃栽，更新頻繁，如果一直依賴于腳手架的話會(huì)很被動(dòng)躯畴，所以熟悉一下開(kāi)發(fā)環(huán)境的搭建還是很有必要的谍咆。
下面我們將從一個(gè)文件夾開(kāi)始搭建一個(gè)vue開(kāi)發(fā)環(huán)境
首先我們創(chuàng)建一個(gè)空文件夾禾锤，beginvue，命令行cd 到文件夾下摹察，執(zhí)行npm init恩掷，初始化package.json文件，一路enter選擇默認(rèn)供嚎，然后創(chuàng)建index .js文件作為入口文件黄娘，現(xiàn)在的目錄情況是這樣的
然后我們安裝搭建vue環(huán)境必要的包，克滴，webpack包逼争，webpack-cli包，vue包劝赔，vue-loader包誓焦，
npm install webpack@^4.0.0 webpack-cli@^3.0.0 vue-loader@^15.0.0 --save-dev
npm install vue@^2.0.0 --save
接下來(lái)創(chuàng)建entry.js作為配置文件，在package.json 中加入script腳本方便使用着帽，"dev": "webpack --config entry.js"
現(xiàn)在的package.json配置為
{
"name": "beginvue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --config entry.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"vue-loader": "^15.7.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
},
"dependencies": {
"vue": "^2.6.8"
}
}
我們開(kāi)始編寫配置文件entry.js ,
const path = require('path');
module.exports = {
entry: {
main:'./index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
};
執(zhí)行npm run dev 可以看到打包成功杂伟，在根目錄下創(chuàng)建出dist文件夾，并把main.js打包到dist文件夾下仍翰，
vue js開(kāi)發(fā)環(huán)境需要nodejs的本地服務(wù)來(lái)提供本地訪問(wèn)和熱更新赫粥，所以這時(shí)我們需要安裝webpack-dev-server包來(lái)啟動(dòng)本地服務(wù)，
npm install webpack-dev-server@^3.0.0 --save-dev
然后我們修改package.json中的run腳本予借，修改為webpack-dev-server啟動(dòng)越平，并加上一些參數(shù)--port 端口，--open 自動(dòng)打開(kāi)瀏覽器灵迫，--inline啟動(dòng)內(nèi)聯(lián)模式,--host socket設(shè)置秦叛，哪些ip能夠訪問(wèn)0.0.0.0表示哪里都可以，--hot 表示啟動(dòng)熱更新
- "dev": "webpack --config entry.js"
+ "dev": "webpack-dev-server --inline --open --port 8080 --host 0.0.0.0 --hot --config entry.js"
另外一些配置我們寫到entry.js配置文件的devServer的配置項(xiàng)上
const path = require('path');
module.exports = {
entry: {
main:'./index.js'
},
devServer:{
index:"index.html",
publicPath: "/",
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
};
這里可以配置許多選項(xiàng)瀑粥，具體可查看文檔书闸，現(xiàn)在只需配置publicPath，這個(gè)路徑下的文件可以在瀏覽器被訪問(wèn)到利凑，index,這個(gè)配置的是訪問(wèn)本地服務(wù)地址默認(rèn)的訪問(wèn)文件
為了能夠訪問(wèn)index.html 文件和把打包后的文件注入到主index.html文件中我們需要安裝html-webpack-plugin浆劲，
npm install html-webpack-plugin@^3.0.0 --save-dev
導(dǎo)入插件后的配置文件為
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: {
main:'./index.js'
},
devServer:{
index:"index.html",
publicPath: "/",
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
plugins:[
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
]
};
HtmlWebpackPlugin我們傳入了三個(gè)參數(shù)
- filename:生成文件路徑及路徑名
- template:生成html文件使用的模版，
- inject:配置打包生成的js文件插入的位置哀澈，默認(rèn)是body里牌借，可以配置到head標(biāo)簽里等，但是vue中需要在body中割按，因?yàn)橛袑?duì)#app dom的獲取膨报，所以應(yīng)該在dom下
初步配置好了webpack文件接下來(lái)我們來(lái)編寫vue入口文件index.js，我們先寫個(gè)極簡(jiǎn)版vue運(yùn)行起來(lái)在慢慢加入更多功能
import Vue from "vue";
new Vue({
data(){
return{
text:123,
}
},
el:"#app",
render:(c)=>c("h2",1223212321312123123)
})
導(dǎo)入已經(jīng)安裝的vue，不用任何其他插件手寫render函數(shù)现柠，
執(zhí)行npm run dev院领，瀏覽器自動(dòng)啟動(dòng)，且在屏幕上顯示h2標(biāo)簽內(nèi)容為122……够吩，
可以看到比然，頁(yè)面渲染成功，打包后的js也自動(dòng)插入成功周循，并且如果我們修改index.js文件强法，頁(yè)面也會(huì)熱更新，
總結(jié)
到這里我們已經(jīng)初步完成vue開(kāi)發(fā)環(huán)境配置湾笛，下一節(jié)我們將引入更多vue功能
項(xiàng)目源碼在這里,看的舒服的話順便給個(gè)star ><
