vue環(huán)境配置與基礎(chǔ)開發(fā)

一、背景

最近因公司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)境辜荠,npmnode.js v0.6.x版以后就內(nèi)嵌在node.js中抚笔,所以安裝node.js就可以了。配置如下:
1侨拦、去官網(wǎng)下載MacOsnode.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)圖

base-demo.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末在岂,一起剝皮案震驚了整個(gè)濱河市奔则,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蔽午,老刑警劉巖易茬,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異及老,居然都是意外死亡抽莱,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門骄恶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來食铐,“玉大人,你說我怎么就攤上這事僧鲁∨吧耄” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵寞秃,是天一觀的道長斟叼。 經(jīng)常有香客問我,道長春寿,這世上最難降的妖魔是什么朗涩? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮绑改,結(jié)果婚禮上谢床,老公的妹妹穿的比我還像新娘。我一直安慰自己厘线,他們只是感情好识腿,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著皆的,像睡著了一般覆履。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上费薄,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天硝全,我揣著相機(jī)與錄音,去河邊找鬼楞抡。 笑死伟众,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的召廷。 我是一名探鬼主播凳厢,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼竞慢!你這毒婦竟也來了先紫?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤筹煮,失蹤者是張志新(化名)和其女友劉穎遮精,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體败潦,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡本冲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了劫扒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片檬洞。...
    茶點(diǎn)故事閱讀 40,865評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖沟饥,靈堂內(nèi)的尸體忽然破棺而出添怔,到底是詐尸還是另有隱情,我是刑警寧澤贤旷,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布广料,位于F島的核電站,受9級特大地震影響遮晚,放射性物質(zhì)發(fā)生泄漏性昭。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一县遣、第九天 我趴在偏房一處隱蔽的房頂上張望糜颠。 院中可真熱鬧,春花似錦萧求、人聲如沸其兴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽元旬。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間匀归,已是汗流浹背坑资。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留穆端,地道東北人袱贮。 一個(gè)月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像体啰,于是被迫代替她去往敵國和親攒巍。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容