用后臺開發的邏輯理念學習VUE

前言

近些年前端開發快速發展，現在學習前端已經不像以前那樣僅僅學習一個語法就可以了，它已經是一門編程技術了，它們有自己獨立的類似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 ，然后禁用，然后重啟，

新建專案結構如下圖：

結構描述如下表：

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，

如上圖所示，我們得到了修改頁面，

到此Vue的基本使用已經介紹完了，

----------------------------------------------------------------------------------------------------

注：此文章為原創，任何形式的轉載都請聯系作者獲得授權并注明出處！
若您覺得這篇文章還不錯，請點擊下方的【推薦】，非常感謝！

https://www.cnblogs.com/kiba/p/13673631.html

標籤：Html/Css

上一篇：【代碼筆記】Web-CSS-CSS偽元素

下一篇：蒲公英 &#183; JELLY技術周刊 Vol.22: npm i [email protected]