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