一、背景
最近因公司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>
四、項(xiàng)目結(jié)構(gòu)圖
