使用vue-cli搭建SPA項(xiàng)目的詳細(xì)過程
一、vue-cli構(gòu)建SPA項(xiàng)目及SPA項(xiàng)目結(jié)構(gòu)介紹
vue-cli是vue.js的腳手架,用于自動(dòng)生成vue.js+webpack的項(xiàng)目模板,創(chuàng)建命令如下:
vue init webpack xxx
注:xxx 為自己創(chuàng)建項(xiàng)目的名稱;必須先安裝vue,vue-cli,webpack,node等一些必要的環(huán)境
1.1利用vue-cli構(gòu)建SPA
安裝vue-cli命令-npm install (-g、-s、-d)
-g:js依賴會(huì)下載到node_global中
-s:會(huì)被打包(安裝到dependencies里面)
-d:只會(huì)在開發(fā)環(huán)境中被依賴
1.2spa的訪問過程:
(1)訪問index.html
(2)index.html通過main.js中的vue實(shí)例管理#app邊界,同時(shí)指定App.vue模板
(3)App.vue中包含了圖片以及錨點(diǎn),而錨點(diǎn)與組件的對應(yīng)關(guān)系存在router/index.js中,所以就指向了一個(gè)組件
(4)最終App.vue中就顯示了logo圖片以及helloworld.vue的內(nèi)容
1.3如何安裝vue-cli命令
npm install -g vue-cli
該行命令在哪里的cmd窗口執(zhí)行都可以(根目錄、管理員窗口等)
npm install webpack -g
以上命令ok后,構(gòu)建spa項(xiàng)目
vue init webpack xiaokun_spa此命令用于創(chuàng)建SPA項(xiàng)目,它會(huì)在當(dāng)前目錄生成一個(gè)以“xiaokun_spa”命名的文件夾
注:xiaokun_spa文件夾則為項(xiàng)目名,項(xiàng)目名不能用中文或大寫字母
這樣spa項(xiàng)目就創(chuàng)建好了,這邊使用HBuilder X導(dǎo)入
導(dǎo)入后,我們來認(rèn)識一下,其中的類
更改端口號8080——>8083:
spa訪問過程:
1.訪問index.html
2.index.html通過main.js中的vue實(shí)例管理#app邊界,同時(shí)指定APP.vue模板
3.APP.vue中包含了logo圖片以及錨點(diǎn),而錨點(diǎn)與組件的對應(yīng)關(guān)系存在router/index.js中,所有就指向了一個(gè)組件
4.最終APP.vue中就顯示了logo圖片以及helloworld.vue的內(nèi)容
二、SPA完成路由的開發(fā)
步驟
1、引入路由js依賴:main.js中已經(jīng)完成
2、定義組件:呈現(xiàn)形式是以.vue文件展示
template標(biāo)簽中定義組件內(nèi)容
通過export default指定組件的名字
3、定義路由與組件之間的對應(yīng)關(guān)系
router/index.js文件中進(jìn)行定義
4、獲取路由對象:main.js中已經(jīng)完成
5、掛載Vue實(shí)例:main.js中已經(jīng)完成
6、定義錨點(diǎn):App.vue 使用 router-view
7、觸發(fā)事件:App.vue 使用 router-link to
Home.vue:
<template> <div> 這是首頁內(nèi)容,展示最新的10篇博客 </div> </template> <script> export default { name: 'Home', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style> </style>
About.vue:
<template> <div> 這是關(guān)于本站顯示的內(nèi)容區(qū)域,本站的發(fā)展史... </div> </template> <script> export default { name: 'About', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style> </style>
index.js:
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Home from '@/components/Home' import About from '@/components/About' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/Home', name: 'Home', component: Home }, { path: '/About', name: 'About', component: About }, ] })
App.vue:
<template> <div id="app"> <!-- 觸發(fā)事件--> <router-link to="/Home">首頁</router-link> <router-link to="/About">關(guān)于</router-link> <!-- <img src="./assets/logo.png"> --> <!-- 錨點(diǎn)--> <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>
三、嵌套路由
children:[ ]
AboutMe.vue:
<template> <div>站長</div> </template> <script> export default { name:'AboutMe', data() { return { }; } } </script> <style> </style>
AboutWebSite.vue:
<template> <div>本站</div> </template> <script> export default { name:'AboutWebSite', data() { return { }; } } </script> <style> </style>
index.js:
import Vue from 'vue' import Router from 'vue-router' // 3.定義路由與組件的對應(yīng)關(guān)系 import HelloWorld from '@/components/HelloWorld' import Home from '@/components/Home' import About from '@/components/About' import AboutMe from '@/components/AboutMe' import AboutWebSite from '@/components/AboutWebSite' Vue.use(Router) // 4.生成路由對象 export default new Router({ routes: [ { path: '/', // 這個(gè)可要可不用 name: 'Home', component: Home }, { path: '/Home', name: 'Home', component: Home }, { path: '/About', name: 'About', component: About }, { path: '/AboutMe', name: 'AboutMe', component: AboutMe }, { path: '/AboutWebSite', name: 'AboutWebSite', component: AboutWebSite } ] })
About.vue:
<template> <div> <!-- 這是關(guān)于本站的內(nèi)容區(qū)域,本站的發(fā)展史... --> <!-- 觸發(fā)事件 --> <router-link to="/AboutMe">關(guān)于站長</router-link> <router-link to="/AboutWebSite">關(guān)于本站</router-link> <!-- 定義錨點(diǎn) --> <router-view></router-view> </div> </template> <script> export default { name:'About', data() { return { }; } } </script> <style> </style>
到此這篇關(guān)于使用vue-cli搭建SPA項(xiàng)目的文章就介紹到這了,更多相關(guān)vue-cli搭建SPA項(xiàng)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Element?UI表單驗(yàn)證規(guī)則動(dòng)態(tài)失效問題的解決辦法
這篇文章主要給大家介紹了關(guān)于Element?UI表單驗(yàn)證規(guī)則動(dòng)態(tài)失效問題的解決辦法,Element UI提供了強(qiáng)大的表單驗(yàn)證功能,可以輕松地對表單進(jìn)行驗(yàn)證,需要的朋友可以參考下2023-09-09vue手機(jī)端input change時(shí),無法執(zhí)行的問題及解決
這篇文章主要介紹了vue手機(jī)端input change時(shí),無法執(zhí)行的問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05Vue使用Three.js創(chuàng)建交互式3D場景的全過程
在現(xiàn)代Web開發(fā)中,通過在頁面中嵌入3D場景,可以為用戶提供更加豐富和交互性的體驗(yàn),Three.js是一款強(qiáng)大的3D JavaScript庫,它簡化了在瀏覽器中創(chuàng)建復(fù)雜3D場景的過程,本文將介紹如何在Vue中使用Three.js,創(chuàng)建一個(gè)簡單的交互式3D場景,需要的朋友可以參考下2023-11-11vue設(shè)置全局變量5種方法(讓你的數(shù)據(jù)無處不在)
這篇文章主要給大家介紹了關(guān)于vue設(shè)置全局變量的5種方法,通過設(shè)置的方法可以讓你的數(shù)據(jù)無處不在,在項(xiàng)目中經(jīng)常會(huì)復(fù)用一些變量和函數(shù),比如用戶的登錄token,用戶信息等,這時(shí)將它們設(shè)為全局的就顯得很重要了,需要的朋友可以參考下2023-11-11解決element?ui?cascader?動(dòng)態(tài)加載回顯問題
這篇文章主要介紹了element?ui?cascader?動(dòng)態(tài)加載回顯問題解決方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08