摘要:別名相當(dāng)于前面先引入了路由插件,然后顯式聲明要用路由。注意到,等都是頁(yè)面也可以是組件,接著注冊(cè)路由器,然后開(kāi)始配置路由。
搭建環(huán)境
工欲善其事必先利其器,我們的學(xué)習(xí)計(jì)劃從學(xué)會(huì)搭建Vue所需要的環(huán)境開(kāi)始,node和npm的環(huán)境不用說(shuō)是必須的,現(xiàn)在前端流程化很熱門(mén),基本上新的技術(shù)都會(huì)在這套流程的基礎(chǔ)上做開(kāi)發(fā),我們只需要站在巨人的XX上裝*就可以了。我假設(shè)你的機(jī)子上已經(jīng)有了最新的node和npm了,那我們就只需要執(zhí)行以下命令:
$ npm install -g vue-cli
構(gòu)建完了之后,隨便進(jìn)入一個(gè)我們事先準(zhǔn)備好的目錄,比如demo目錄,然后在目錄中做初始化操作:
$ vue init webpack vue-cli-demo
webpack參數(shù)是指vue-cli-demo這個(gè)項(xiàng)目將會(huì)在開(kāi)發(fā)和完成階段幫你自動(dòng)打包代碼,比如將js文件統(tǒng)一合成一個(gè)文件,將CSS文件統(tǒng)一合并壓縮等。
init(初始化)的過(guò)程中會(huì)問(wèn)你給項(xiàng)目定義一些描述,版本之類(lèi)的信息,可以不管,一直輸入y確定跳過(guò),完成之后出現(xiàn)以下界面,部分會(huì)提示你接下來(lái)要做的操作,按照它的提示繼續(xù)敲代碼就對(duì)了。
同時(shí)獲取信息:
npm i -S axios vue-axios
cd vue-cli-demo npm install npm run dev
npm install 是安裝項(xiàng)目所需要的依賴(lài),簡(jiǎn)單理解就是安裝一些必要的插件,需要等一段時(shí)間;
生成的文件同樣也可以使用 yarn
npm run dev 是開(kāi)始執(zhí)行我們的項(xiàng)目了,一旦執(zhí)行這個(gè)命令之后,等一小會(huì),瀏覽器應(yīng)該會(huì)自動(dòng)幫你打開(kāi)一個(gè)tab為http://localhost:8080/#/或者h(yuǎn)ttp://127.0.0.1:8080/#/的鏈接,這個(gè)鏈接就是我們本地開(kāi)發(fā)的項(xiàng)目主頁(yè)了,如果沒(méi)有,說(shuō)明出錯(cuò)了。請(qǐng)移步到評(píng)論區(qū)回復(fù)吧。。。
看看Vue都給我們生成一些什么文件:
yarn npm包管理工具(facebook)
README.md 通常所有項(xiàng)目的說(shuō)明文件
package.json 維護(hù)包管理的配置文件,包括版本
index.html 首頁(yè)
.postcssrc.js postcss的配置
.gitignore git的忽略文件列表
.eslintrc.js 代碼檢查配置文件
.eslintignore 代碼檢查忽略文件
.editorconfig 編輯器的配置文件
.babelrc babel的配置文件
static 網(wǎng)站的靜態(tài)資源
src 源代碼
src/assets 資源(可以預(yù)處理)
src/components 組件目錄
src/router 路由
src/App.vue 根組件
src/main.js 入口文件
config 配置目錄
build 構(gòu)建工具相關(guān)
test 測(cè)試目錄
test/unit 單元測(cè)試
test/e2e 端對(duì)端測(cè)試
dist 打包后的目標(biāo)代碼
這其中我們需要關(guān)注的是以下文件
package.json保存一些依賴(lài)信息,config保存一些項(xiàng)目初始化配置,build里面保存一些webpack的初始化配置,index.html是我們的首頁(yè),除了這些,最關(guān)鍵的代碼都在src目錄中,index在很多服務(wù)器語(yǔ)言中都是預(yù)設(shè)為首頁(yè),像index.htm,index.php等;打開(kāi)build目錄中的webpack.base.conf.js,會(huì)看到這樣的代碼
module.exports = { entry: { app: "./src/main.js" } }
說(shuō)明我們的入口js文件在src目錄中的main.js,接下來(lái)我們就分析下這些初始化代碼先;
跟著代碼走Vue的核心架構(gòu),按照官方解釋和個(gè)人理解,主要在于組件和路由兩大模塊,只要理解了這兩大模塊的思想內(nèi)容,剩下API使用就只是分分鐘的事情了。
因是潛入我們只關(guān)注src里的文件即可開(kāi)發(fā)簡(jiǎn)單應(yīng)用
首先是src下的main.js:
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from "vue" import App from "./App" import router from "./router" import Axios from "axios" import VueAxios from "vue-axios" Vue.use(VueAxios, Axios) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: "#app", router, template: "先是第一句", components: { App } })
import Vue from "vue"
這句很好理解,就像你要引入jQuery一樣,vue就是jquery-min.js,然后Vue就是$;然后又引入了./App文件,也就是目錄中和main.js同級(jí)的App.vue文件;在Vue中引入文件可以直接用import,文件后綴名可以是.vue,這是Vue自己的文件類(lèi)型,之前說(shuō)的webpack會(huì)將js和css文件打包,同樣的道理,在webpack中配置vue插件后(項(xiàng)目默認(rèn)配置),webpack就可以將.vue類(lèi)型的文件整合打包,這和nodeJs中require差不多的道理。同樣類(lèi)似于
同時(shí)涉及到路由
路由這句代碼在頁(yè)面中放入一個(gè)路由視圖容器,當(dāng)我們?cè)L問(wèn)http://localhost:8080/#/about/的時(shí)候會(huì)將about的內(nèi)容放進(jìn)去,訪問(wèn)http://localhost:8080/#/recruit的時(shí)候會(huì)將recruit的內(nèi)容放進(jìn)去
前面說(shuō)的src/main.js中有一句引入路由器的代碼。
import router from "./router"
現(xiàn)在就讓我們打開(kāi)router目錄下的js文件。
import Vue from "vue" import Router from "vue-router" import HelloWorld from "@/components/Hello"http://@別名相當(dāng)于src Vue.use(Router) export default new Router({ routes: [ { path: "/", name: "Hello", component: HelloWorld } ] })
前面先引入了路由插件vue-router,然后顯式聲明要用路由 Vue.use(Router) 。注意到Hello,About等都是頁(yè)面(也可以是組件),接著注冊(cè)路由器,然后開(kāi)始配置路由。
路由的配置應(yīng)該一目了然,給不同的path分配不同的頁(yè)面(或組件,頁(yè)面和組件其實(shí)是一樣的概念),name參數(shù)不重要只是用來(lái)做識(shí)別用的。看到這里就可以明白,前面說(shuō)的紅色框的內(nèi)容,其實(shí)就是Hello里面的內(nèi)容,打開(kāi)components目錄下的HelloWorld.vue就能明白了。
build文件夾和config文件夾淺講// build for production with minification //構(gòu)建產(chǎn)品壓縮 npm run build //build for production and view the bundle analyzer report //構(gòu)建產(chǎn)品并查看包分析器報(bào)告 npm run build --report
config判斷是否上線,加載的資源不同
總結(jié)下前面講的內(nèi)容先:搭建環(huán)境
代碼邏輯
單頁(yè)面組件(簡(jiǎn)單帶過(guò))
路由
子路由
以上的流程就是我們剛開(kāi)始接觸Vue時(shí)候的簡(jiǎn)單介紹,在之前就說(shuō)過(guò)學(xué)習(xí)Vue能掌握組件和路由的基本概念之后,對(duì)于我們后續(xù)了解他的工作機(jī)制有著很大的幫助,本篇章我們只是簡(jiǎn)單介紹了單頁(yè)面組件。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/51519.html
摘要:函數(shù)式編程,一看這個(gè)詞,簡(jiǎn)直就是學(xué)院派的典范。所以這期周刊,我們就重點(diǎn)引入的函數(shù)式編程,淺入淺出,一窺函數(shù)式編程的思想,可能讓你對(duì)編程語(yǔ)言的理解更加融會(huì)貫通一些。但從根本上來(lái)說(shuō),函數(shù)式編程就是關(guān)于如使用通用的可復(fù)用函數(shù)進(jìn)行組合編程。 showImg(https://segmentfault.com/img/bVGQuc); 函數(shù)式編程(Functional Programming),一...
摘要:我之前寫(xiě)過(guò)關(guān)于的文章,,最近在工作中用到比較多了,頓時(shí)覺(jué)得確實(shí)是比較優(yōu)秀的一個(gè)。 我之前寫(xiě)過(guò)關(guān)于cypress的文章,https://segmentfault.com/a/11...,最近在工作中用到cypress比較多了,頓時(shí)覺(jué)得cypress確實(shí)是比較優(yōu)秀的一個(gè)。 1. 軟件安裝. 2. 安裝cypress 安裝cypress客戶端:http://download.cypress...
摘要:接受另一個(gè)函數(shù)作為參數(shù),然后用接受的這個(gè)新函數(shù)處理,將結(jié)果再次傳給,最后將實(shí)例化的新對(duì)象返回。空值檢查就是個(gè)不錯(cuò)的例子這個(gè)實(shí)現(xiàn)里,只在為合法值非空時(shí),傳入。但不論怎么變化,她們也都和一樣遵守上面提到的規(guī)則。 大多數(shù)關(guān)于monad的教程都和老太太的裹腳布一樣,又臭、又長(zhǎng),說(shuō)不清、道不明。當(dāng)然我也不偉大,沒(méi)法保證我寫(xiě)的一定更明了,更生動(dòng),甚至更屌?不過(guò)我至少可以確定,我這篇更簡(jiǎn)潔。浪費(fèi)不了...
摘要:來(lái)自不同視圖的行為需要變更同一狀態(tài)。圖解后端的行為,響應(yīng)在上的用戶輸入導(dǎo)致的狀態(tài)變化。中的非常類(lèi)似于事件每個(gè)都有一個(gè)字符串的事件類(lèi)型和一個(gè)回調(diào)函數(shù)。 什么是Vuex? Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。 Vuex采用和Redux類(lèi)似的單向數(shù)據(jù)流的方式來(lái)管理數(shù)據(jù)。用戶...
閱讀 2754·2019-08-30 15:53
閱讀 521·2019-08-29 17:22
閱讀 1038·2019-08-29 13:10
閱讀 2307·2019-08-26 13:45
閱讀 2751·2019-08-26 10:46
閱讀 3201·2019-08-26 10:45
閱讀 2503·2019-08-26 10:14
閱讀 466·2019-08-23 18:23