前言

新建項(xiàng)目近些年前端開發(fā)快速發(fā)展，現(xiàn)在學(xué)習(xí)前端已經(jīng)不像以前那樣僅僅學(xué)習(xí)一個語法就可以了，它已經(jīng)是一門編程技術(shù)了，它們有自己獨(dú)立的類似Main函數(shù)的入口，有像MVC一樣規(guī)范好的層次結(jié)構(gòu)，有自己的開發(fā)工具可以發(fā)布打包程序，甚至還可以獨(dú)立連接數(shù)據(jù)庫，當(dāng)然了，優(yōu)點(diǎn)與缺點(diǎn)共存，不能向其他語言那樣斷點(diǎn)調(diào)試導(dǎo)致了，它的脈絡(luò)更難被捕捉，猶如遠(yuǎn)古時代的代碼開發(fā)一樣，但它還是已經(jīng)可以稱為一門編程技術(shù)了，所以學(xué)習(xí)一門前端開發(fā)，已經(jīng)是一件非常有意義的事兒了。

首先安裝Nodejs，然后我們一起學(xué)習(xí)使用Vue。

Vue是一個前端框架，安裝了Nodejs后，可以使用Npm命令直接下載vue。

打開cmd窗口，依次輸入如下命令：

npm i vue -g
npm i vue-cli -g

注：輸入【npm i vue -g】下載vue時，盡量使用-g，因?yàn)関ue的文件中有一些文件是可以vue開頭的命令行的，因?yàn)?g是下載到環(huán)境變量配置的Path地址，所以如果下載到這里，那么vue開頭的命令就可以在cmd窗口中直接使用了，不然還需要重新配置環(huán)境變量，添加當(dāng)前下載目錄。

下載完Vue后，我們新建一個文件夾，然后打開CMD跳轉(zhuǎn)該目錄，如【cd/d F:\Nodejs2】，然后使用vue開頭的命令創(chuàng)建一個項(xiàng)目，在cmd窗口輸入命令如下：

vue init webpack my-project

輸入完命令后，會提示我們配置項(xiàng)目信息，可以一直回車使用默認(rèn)配置，然后等待項(xiàng)目創(chuàng)建完成。

注：輸入vue init webpack my-project后，不要切換窗口，一直回車，就可以創(chuàng)建成了，如果切換窗口了，切換回當(dāng)前cmd窗口后，回車有時候無法直接輸入，需要操作下才能輸入，比如先按一下個上下左右鍵。

項(xiàng)目創(chuàng)建完成后，得到如下界面內(nèi)容。

項(xiàng)目創(chuàng)建完成，我們會在目錄下多了一個文件夾—my-project。

然后我們在通過CMD命令在跳轉(zhuǎn)到項(xiàng)目目錄【cd/d F:\Nodejs2\my-project】，然后運(yùn)行npm install，進(jìn)行初始化。

npm install

最后，我們再輸入命令npm run dev，得到窗體如下：

然后打開瀏覽器，輸入http://localhost:8080，vue項(xiàng)目運(yùn)行成功，如下圖：

注：vue自帶了一個類似server.js的配置，所以運(yùn)行npm run dev命令后，會啟動一個服務(wù)器。

學(xué)習(xí)項(xiàng)目

剛剛安裝的VSCode需要禁用JS-CS-HTML Formatter插件，不然保存代碼時會自動格式化了，然后html代碼全亂了通過VisualStudioCode將新建的項(xiàng)目打開。

禁用方法：ctrl+shift+X調(diào)出擴(kuò)展，搜索JS-CS-HTML Formatter ，然后禁用，然后重啟。

新建項(xiàng)目結(jié)構(gòu)如下圖：

結(jié)構(gòu)描述如下表：

src核心

src是我們代碼編寫的核心文件，其內(nèi)容如下：

assets: 放置一些圖片，如logo等。

components: 目錄里面放了一個組件文件，可以不用。

App.vue: 項(xiàng)目入口文件，我們也可以直接將組件寫這里，而不使用components 目錄。

main.js: 項(xiàng)目的核心文件。

代碼詳解

Main.js是項(xiàng)目的入口，類似其他語言的Main函數(shù)，代碼如下：Main.js

import Vue from 'vue'//引入vue.js文件
import App from './App'//引入當(dāng)前目錄下的App.vue文件，【./】指當(dāng)前目錄，【.vue】被隱藏了
import router from './router'//引入當(dāng)前目錄下router文件夾下的Index.js文件

Vue.config.productionTip = false//屏蔽調(diào)試時的一些console日志內(nèi)容

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,//指定路由的js對象
 components: { App },//加載上方導(dǎo)入到組件。
 template: '<App/>'//選擇一個組件去替換index.html 中的<div id="app"></div>。這里使用我們components導(dǎo)入的App組件，相當(dāng)于指定初始化時的顯示組件，Vue組件注冊后可以使用<tagName></tagName>的模式來使用組件。
})

import

import類似其他語言的引入命名空間或引入包，這里主要是用于引入js文件和vue文件。

如果引入的是js文件，則鼠標(biāo)放到引用上，會顯示具體引用路徑，如下圖：

new Vue

new Vue這一段是創(chuàng)建一個js的Vue對象，該對象的構(gòu)造函數(shù)，接受一個對象，這里傳了一個匿名對象，我們可以看到，new Vue后的圓括號【(】里，跟了一對大括號【{】，然后這個對象里，有幾個屬性，需要初始化。

el：估計(jì)是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
 }
 ]
})

可以看到，代碼中開放了一個默認(rèn)的Router類型的對象，這個對象是vue-router中定義的，用于定義頁面跳轉(zhuǎn)路由，這里定義了路徑HelloWorld對應(yīng)導(dǎo)入/components/HelloWorld.vue文件。

ps:export類似于其他語言的public，就是公開該js文件的某個對象或函數(shù)，export default就是默認(rèn)公開的那一個，這樣其他js文件使用import導(dǎo)入該js文件時，就可以省略指定對象這幾個代碼，這種是一個很原始的程序設(shè)計(jì)風(fēng)格，大家還需要適應(yīng)。

App.Vue

App.Vue是Main.js默認(rèn)加載的模塊，其代碼如下：

<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)配置在了一個div中，并且還放在了一個H2下面，這樣，我們的這個H2標(biāo)簽就永遠(yuǎn)會在路由視圖上面了。

運(yùn)行項(xiàng)目

我們對App.Vue和HelloWorld.vue進(jìn)行了簡單修改，然后不用重啟，不用編譯，只需要重新切換回剛剛的那個網(wǎng)頁——http://localhost:8080。

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

到此Vue的基本使用已經(jīng)介紹完了。

總結(jié)

到此這篇關(guān)于Vue入門指導(dǎo)的文章就介紹到這了,更多相關(guān)Vue入門指導(dǎo)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論