資訊專欄INFORMATION COLUMN
摘要：除此之外，你還可以運(yùn)行打包命令此時(shí)之前說的打包生成的文件應(yīng)該就生成了，或者選擇用瀏覽器打開應(yīng)該也可以看見和剛剛一樣的結(jié)果。而如何創(chuàng)建一個(gè)對象是知道，因此開頭引入了，并使用它常見了一個(gè)對象，然后這個(gè)對象就管理了這一塊區(qū)域。
作者：心葉
時(shí)間：2018-04-25 16:33
本篇最終項(xiàng)目文件Github地址：github.com/paper520/vue.quick/tree/V1
Vue2學(xué)習(xí)之旅系列文章目錄
【不使用vue-cli搭建，因?yàn)槟菢訒?huì)遺落太多細(xì)節(jié)沒有說明】
下面，我們來一步步使用webpack搭建一個(gè)用來學(xué)習(xí)Vue2的環(huán)境，力求沒有冗余的代碼，讓我們開始吧！
備注：后面的學(xué)習(xí)全部基于這個(gè)環(huán)境來進(jìn)行！
先來看看最終的項(xiàng)目結(jié)構(gòu)：
整體說明(1)build/main.js和node_modules是自動(dòng)生成的，先無視
(2)package.json里面是需要用到的node包和一些配置，內(nèi)容如下：
{
"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開發(fā)，因此vue包是必須的，webpack是打包框架，webpack-dev-server是服務(wù)器，vue-loader和babel-loader分別是用來解析.js和.vue文件的，余下的都是這二個(gè)包依賴的。
上面的start和release分別是配置啟動(dòng)服務(wù)器和打包的
（3）webpack.config.js是用來配置webpack的，先看看具體內(nèi)容：
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，打包的結(jié)果存放在main.js，然后配置了如何解析.vue和.js文件
（4）接著是index.html：
vue.quick
除了引入了最后打包的文件main.js外，請記住id="root"，姑且稱為掛載點(diǎn)。
(5)最后還剩下二個(gè)文件沒有說了，先看看App.vue，這個(gè)叫做【單文件組件】，其實(shí)就是一個(gè)vue組件，看看內(nèi)容（具體寫法先無視，后面會(huì)細(xì)說）：
{{ msg }}
（6）最后一個(gè)，也就是打包入口文件entry.js，先看看內(nèi)容：
import Vue from "vue";
import App from "./App.vue";
//根對象
var vm = new Vue({
//掛載點(diǎn)
el: "#root",
//啟動(dòng)組件
render: function (callback) {
return callback(App);
}
});
可以簡單的理解，這就是一個(gè)vue對象，前面（5）說的組件被他使用了，具體的還是后面細(xì)說。
啟動(dòng)項(xiàng)目全部的文件都在本地保存好之后（node.js需要保證安裝好），命令行進(jìn)入項(xiàng)目，確保dir或者ls的時(shí)候可以看見package.json，然后運(yùn)行：
npm install
這樣就安裝好了需要的node包，接著我們啟動(dòng)服務(wù)：
npm start
如果用的是上面的配置，現(xiàn)在在瀏覽器訪問localhost:20000/應(yīng)該就可以看見藍(lán)色的【vue.quick - 基本版本代碼】幾個(gè)字了。
除此之外，你還可以運(yùn)行打包命令：
npm run release
此時(shí)之前說的打包生成的main.js文件應(yīng)該就生成了，或者選擇用瀏覽器打開index.html應(yīng)該也可以看見和剛剛一樣的結(jié)果。
vue對象說明你可以認(rèn)為，一個(gè)vue對象（也有的叫vue實(shí)例）就是一個(gè)管理一塊頁面區(qū)域的東西，具體管理哪一塊區(qū)域是根據(jù)掛載點(diǎn)來確定的，還記得之前說的index.html里面的掛載點(diǎn)嗎，就是和這里的el屬性對應(yīng)的，這里的el屬性的值是#root，表示掛載到id=root的標(biāo)簽上，那一塊歸這個(gè)vue對象管理了。
而如何創(chuàng)建一個(gè)vue對象是vue知道，因此開頭引入了Vue，并使用它常見了一個(gè)vue對象，然后這個(gè)對象就管理了這一塊區(qū)域。
可是管理之后，這一塊具體如何渲染，有什么交互等，因?yàn)槭莢ue對象，直接看VUE的API就知道了
這里用到了render屬性，表示使用App這個(gè)vue單文件組件來處理這一塊，因此，接著看這個(gè)組件里面的東西。
vue單文件組件組件里面的地方可以劃分三塊：template，script和style。
4.1 template表示組件模板，有點(diǎn)類似html代碼，不過有一點(diǎn)點(diǎn)區(qū)別
4.2 style表示樣式，你可以在這里寫修改模板的css文件
4.3 script可以理解為管理數(shù)據(jù)和控制的，比如這里定義了一個(gè)數(shù)據(jù)msg，在模板中使用了他，然后頁面就顯示出來了結(jié)果
結(jié)束語到這里，如果項(xiàng)目已經(jīng)啟動(dòng)成功，并且對這些文件已經(jīng)有了大致的理解，那么就可以了，具體的細(xì)節(jié)會(huì)在后續(xù)文章中說明。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/94593.html
摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個(gè)鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運(yùn)，我不曉得。我只曉得，不認(rèn)命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...
摘要：大概過來一個(gè)多月，我決定兩路開工。使用給前端寫接口，配備后臺(tái)管理功能，先把后臺(tái)搭建好。大概幾天過后，后臺(tái)一些簡單的功能實(shí)現(xiàn)后，就開始用開始搭建前臺(tái)，也一直在想做點(diǎn)什么比較好，于是就做了個(gè)豆瓣評分類似的項(xiàng)目。 寫在前面 由于最近公司業(yè)務(wù)不是很忙，空閑時(shí)間比較多，于是就在糾結(jié)Vue.js（之前就學(xué)習(xí)過）和Node.js先專研哪個(gè)比較好，最終選擇了先玩玩Node.js。經(jīng)過一段時(shí)間的學(xué)習(xí)，就...
摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
閱讀 3229·2021-11-10 11:36
閱讀 3392·2021-10-13 09:40
閱讀 6625·2021-09-26 09:46
閱讀 735·2019-08-30 15:55
閱讀 1476·2019-08-30 15:53
閱讀 1653·2019-08-29 13:55
閱讀 3062·2019-08-29 12:46
閱讀 3293·2019-08-29 12:34
