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