前言
近些年前端開發快速發展,現在學習前端已經不像以前那樣僅僅學習一個語法就可以了,它已經是一門程式設計技術了,它們有自己獨立的類似Main函式的入口,有像MVC一樣規範好的層次結構,有自己的開發工具可以釋出打包程式,甚至還可以獨立連線資料庫,當然了,優點與缺點共存,不能向其他語言那樣斷點除錯導致了,它的脈絡更難被捕捉,猶如遠古時代的程式碼開發一樣,但它還是已經可以稱為一門程式設計技術了,所以學習一門前端開發,已經是一件非常有意義的事兒了。
新建專案
首先安裝Nodejs,然後我們一起學習使用Vue。
安裝Nodejs參考:【在Windows下學習Nodejs、Npm和VUE】
Vue是一個前端框架,安裝了Nodejs後,可以使用Npm命令直接下載vue。
開啟cmd視窗,依次輸入如下命令:
npm i vue -g npm i vue-cli -g
注:輸入【npm i vue -g】下載vue時,儘量使用-g,因為vue的檔案中有一些檔案是可以vue開頭的命令列的,因為-g是下載到環境變數配置的Path地址,所以如果下載到這裡,那麼vue開頭的命令就可以在cmd視窗中直接使用了,不然還需要重新配置環境變數,新增當前下載目錄。
下載完Vue後,我們新建一個資料夾,然後開啟CMD跳轉該目錄,如【cd/d F:\Nodejs2】,然後使用vue開頭的命令建立一個專案,在cmd視窗輸入命令如下:
vue init webpack my-project
輸入完命令後,會提示我們配置專案資訊,可以一直回車使用預設配置,然後等待專案建立完成。
注:輸入vue init webpack my-project後,不要切換視窗,一直回車,就可以建立成了,如果切換視窗了,切換回當前cmd視窗後,回車有時候無法直接輸入,需要操作下才能輸入,比如先按一下個上下左右鍵。
專案建立完成後,得到如下介面內容。
專案建立完成,我們會在目錄下多了一個資料夾—my-project。
然後我們在通過CMD命令在跳轉到專案目錄【cd/d F:\Nodejs2\my-project】,然後執行npm install,進行初始化。
npm install
最後,我們再輸入命令npm run dev,得到窗體如下:
然後開啟瀏覽器,輸入http://localhost:8080,vue專案執行成功,如下圖:
注:vue自帶了一個類似server.js的配置,所以執行npm run dev命令後,會啟動一個伺服器。
學習專案
通過VisualStudioCode將新建的專案開啟。
剛剛安裝的VSCode需要禁用JS-CS-HTML Formatter外掛,不然儲存程式碼時會自動格式化了,然後html程式碼全亂了
禁用方法:ctrl+shift+X
調出擴充套件,搜尋JS-CS-HTML Formatter
,然後禁用,然後重啟。
新建專案結構如下圖:
結構描述如下表:
資料夾/檔案 | 描述 |
---|---|
build | 專案構建(webpack)相關程式碼 |
config | 配置目錄,包括埠號等。我們初學可以使用預設的。 |
node_modules | npm 載入的專案依賴模組 |
src | 這裡是我們要開發的目錄,基本上要做的事情都在這個目錄裡。裡面包含了幾個目錄及檔案。 |
static | 靜態資源目錄,如圖片、字型等。 |
test | 初始測試目錄,可刪除 |
.其他檔案 | 這些是一些配置檔案,包括語法配置,git配置等。 |
index.html | 這是一個模板檔案,同時又是Main.js的展示頁面,也可以理解為Index.html的ViewModel是Main.js,Main.js是專案啟動的入口。專案啟動時Main.js會讀取該頁面,然後把當前顯示的vue檔案渲染進該頁面。類似於MVC中的layout.cshtml檔案的作用。 |
package.json | 專案配置檔案。 |
README.md | 專案的說明文件,markdown 格式 |
src核心
src是我們程式碼編寫的核心檔案,其內容如下:
assets: 放置一些圖片,如logo等。
components: 目錄裡面放了一個元件檔案,可以不用。
App.vue: 專案入口檔案,我們也可以直接將元件寫這裡,而不使用components 目錄。
main.js: 專案的核心檔案。
程式碼詳解
Main.js
Main.js是專案的入口,類似其他語言的Main函式,程式碼如下:
import Vue from 'vue'//引入vue.js檔案 import App from './App'//引入當前目錄下的App.vue檔案,【./】指當前目錄,【.vue】被隱藏了 import router from './router'//引入當前目錄下router資料夾下的Index.js檔案 Vue.config.productionTip = false//遮蔽除錯時的一些console日誌內容 /* eslint-disable no-new */ new Vue({ el: '#app', router,//指定路由的js物件 components: { App },//載入上方匯入到元件。 template: '<App/>'//選擇一個元件去替換index.html 中的<div id="app"></div>。這裡使用我們components匯入的App元件,相當於指定初始化時的顯示元件,Vue元件註冊後可以使用<tagName></tagName>的模式來使用元件。可以參考—https://www.runoob.com/vue2/vue-component.html })
import
import類似其他語言的引入名稱空間或引入包,這裡主要是用於引入js檔案和vue檔案。
如果引入的是js檔案,則滑鼠放到引用上,會顯示具體引用路徑,如下圖:
new Vue
new Vue這一段是建立一個js的Vue物件,該物件的建構函式,接受一個物件,這裡傳了一個匿名物件,我們可以看到,new Vue後的圓括號【(】裡,跟了一對大括號【{】,然後這個物件裡,有幾個屬性,需要初始化。
el:估計是element的縮寫,表示Vue繫結的元素。
router:router是我們上面引入的router資料夾下的Index.js檔案,開啟檔案,程式碼如下:
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] })
可以看到,程式碼中開放了一個預設的Router型別的物件,這個物件是vue-router中定義的,用於定義頁面跳轉路由,這裡定義了路徑HelloWorld對應匯入/components/HelloWorld.vue檔案。
ps:export類似於其他語言的public,就是公開該js檔案的某個物件或函式,export default就是預設公開的那一個,這樣其他js檔案使用import匯入該js檔案時,就可以省略指定物件這幾個程式碼,這種是一個很原始的程式設計風格,大家還需要適應。
App.Vue
App.Vue是Main.js預設載入的模組,其程式碼如下:
<template> <div id="app"> <h2>Kiba518</h2> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
這裡主要是用於配置路由檢視—— <router-view/>,其他的樣式我們可以暫時忽略。
可以看到我們把路由檢視(router-view)配置在了一個div中,並且還放在了一個H2下面,這樣,我們的這個H2標籤就永遠會在路由檢視上面了。
執行專案
我們對App.Vue和HelloWorld.vue進行了簡單修改,然後不用重啟,不用編譯,只需要重新切換回剛剛的那個網頁——http://localhost:8080。
如上圖所示,我們得到了修改頁面。
----------------------------------------------------------------------------------------------------
注:此文章為原創,任何形式的轉載都請聯絡作者獲得授權並註明出處!
若您覺得這篇文章還不錯,請點選下方的【推薦】,非常感謝!
https://www.cnblogs.com/kiba/p/13673631.html