一、背景
最近因公司App
項(xiàng)目需求量比較少课幕,App
團(tuán)隊(duì)基本都在內(nèi)部轉(zhuǎn)型厦坛,也算是對大家最好的一種改變方式;目前本人也在學(xué)習(xí)相關(guān)的H5開發(fā)乍惊,針對JS
以前也有不同層度的了解杜秸,也寫過許多的Html
頁面(都是十年前的事了),重新學(xué)習(xí)起Vue
相關(guān)的開發(fā)還算是比較順暢润绎,只是針對一些細(xì)節(jié)方面的東西做一些處理與了解基本上可以直接上項(xiàng)目寫需求撬碟;在周末期間一直想自已如何來搭建一個(gè)基礎(chǔ)的H5項(xiàng)目?在這搭建的路上還是有些困惑莉撇,所以寫一篇記錄一下遇上的坑呢蛤。
二、配置Vue環(huán)境
一直從事客戶端開發(fā)的我棍郎,沒有PC
機(jī)其障,只能MAC
電腦,所以后面的所有配置都是Mac
電服相關(guān)的操作涂佃。 當(dāng)我們學(xué)習(xí)一門新的語言前提励翼,第一件事就是安裝相關(guān)的運(yùn)行環(huán)境,我們在這里首先配置的npm
相關(guān)的運(yùn)行環(huán)境辜荠,npm
自node.js v0.6.x
版以后就內(nèi)嵌在node.js
中抚笔,所以安裝node.js
就可以了。配置如下:
1侨拦、去官網(wǎng)下載MacOs
的node.js
的安裝包
2殊橙、安裝相關(guān)下載好的node.js
的安裝包,和普通軟件一樣狱从,一步一步安裝即可膨蛮,安裝完成查看是否成功
npm -v
3、npm
安裝完成后季研,可以安裝其他工具
- 安裝
webpack
打包工具敞葛,參數(shù)-g表示全局安裝 - 安裝
vue-cli
腳手架,用于初始化vue
項(xiàng)目与涡,查看是否安裝成功
npm i -g vue;npm i -g @vue/cli
vue -V
4惹谐、項(xiàng)目創(chuàng)建,目前下載的與安裝的版本都是最新的驼卖,創(chuàng)建vue 3.0
的項(xiàng)目直接選擇3.0
或者默認(rèn)
vue create project-name
如果要創(chuàng)建vue 2.*
的項(xiàng)目需要使用氨肌,在選擇的時(shí)候,選擇vue2.x
創(chuàng)建
npm install -g @vue/cli
vue create project-name
5酌畜、安裝開發(fā)工具怎囚,現(xiàn)在目前主要采用VSCode
開發(fā)工具,直接上地址下載
三桥胞、項(xiàng)目插件安裝及用例
在項(xiàng)目開發(fā)過程中恳守,需要使用一些組件是必不可少的考婴,首先通過命令行進(jìn)入到vue
項(xiàng)目中,如:
cd ~/Desktop/Vue/vue-demo
再安裝最基礎(chǔ)的兩個(gè)插件:vue-roter
在這里就拿這vue-router
做栗子催烘,如下:
1沥阱、安裝vue-roter
yarn add vue-router
如果使用vue2.x
安裝vue-router
,則需要使用下面這個(gè)命令
npm install vue-router@3.2.0
2伊群、vue-roter
實(shí)例
新建router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
//路由的懶加載
{
path: '/about',
name: 'About',
component: () => import( './views/About.vue')
},
{
//重定向考杉,項(xiàng)目一跑起來就進(jìn)入首頁
path: '/*',
redirect: '/Home'
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
修改main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
修改App.vue
<template>
<div id="app">
<nav>
<router-link to="/">去Home組件</router-link> |
<router-link to="/about">去About組件</router-link>
</nav>
<router-view/>
</div>
</template>
<script>
export default {
data() {
return {
radio: '1'
};
}
}
</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>
新建views/Home.vue
<template>
<div id="app">
Home
</div>
</template>
<script>
export default {
name: "Home"
}
</script>
<style>
</style>
新建views/About.vue
<template>
<div id="app">
About
</div>
</template>
<script>
export default {
name: "About"
}
</script>
<style>
</style>