vue怎么用(一文教你正確的使用Vue框架)

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

打開cmd窗口,依次輸入如下命令:

npm i vue -gnpm 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命令后,會啟動一個服務器。

學習項目

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

禁用方法:ctrl+shift+X調出擴展,搜索JS-CS-HTML Formatter ,然后禁用,然后重啟。

新建項目結構如下圖:

結構描述如下表:

src核心

src是我們代碼編寫的核心文件,其內容如下:

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

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

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

main.js: 項目的核心文件。

代碼詳解

Main.js是項目的入口,類似其他語言的Main函數,代碼如下:Main.js

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 中的<p id="app"></p>。這里使用我們components導入的App組件,相當于指定初始化時的顯示組件,Vue組件注冊后可以使用<tagName></tagName>的模式來使用組件。})

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> <p id="app"> <h3>Kiba518</h3> <router-view/> </p></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)配置在了一個p中,并且還放在了一個H2下面,這樣,我們的這個H2標簽就永遠會在路由視圖上面了。

運行項目

看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注本站行業資訊頻道,感謝您對本站的支持。