從零開始搭建一個 Vue 項目
- 前言
- 一、環境搭建
- 二、Vue 初體驗
- 三、學習總結
前言
寫慣了 React，今天也來 Vue 嘗嘗鮮，本來以為我這老司機學新架構應該如魚得水，沒想到也踩了幾個坑。今天就給大家分享一篇 Vue 的極簡教程，從安裝到入門，從指令的使用到接口的調取，再到路由配置，麻雀雖小五髒俱全，基本上涵蓋了一個項目的核心配件，可将此作為腳手架運用到新項目中去。
一、環境搭建
子產品化應用需要下載下傳 node 和 npm 就不用贅述了吧。
主要安裝以下4個子產品。
- 安裝 @vue/cli
npm install @vue/cli -g
一定要全局安裝，以便可以使用 vue 指令，注意檢視 vue 版本是 vue -V，這裡是大寫的V。
- 安裝腳手架
全局安裝了@vue/cli 子產品之後，就可以使用 vue 指令。
vue create vue-demo
注意 vue-demo 是項目名稱。
- 安裝路由子產品
npm install vue-router
- 安裝 axios(調取接口的子產品)
npm install axios
安裝完成之後可以啟動
npm run serve
二、Vue 初體驗
- 基本腳手架
實戰 Vue 之從零開始搭建一個 Vue 項目前言一、環境搭建二、Vue 初體驗三、學習總結 除了标紅的這幾個檔案，其他都是腳手架指令直接下載下傳下來的。現在一一說一下重點目錄。
vue-demo：項目根目錄。
node_modules：就不用說了吧，下載下傳的所有子產品包。
public：存放 html 檔案和 title 圖示
src：重點目錄，使用者自定義檔案，assets 靜态檔案，如圖檔；components 自定義元件；router 新增的檔案夾，index.js 檔案用來配置路由；App.vue 主子產品 ；main.js 節點挂載和建立路由執行個體。
- 基本路由配置（router/index.js）
import Index from '../components/Index';
import Detail from '../components/Detail';
export default {
routes:[{
path:'/',
redirect:'/index',
},{
path:'/index',
name:'index',
component:Index,
},{
path:'/detail',
name:'detail',
component:Detail,
}
],
mode:'history'
}
- 挂載節點（main.js）
import Vue from 'vue/dist/vue.js'
import App from './App.vue'
import vueRouter from 'vue-router';
import routes from './router/index';
Vue.config.productionTip = false;
Vue.use(vueRouter);
var router = new vueRouter(routes);
new Vue({
el:'#app',
router,
template:'<App/>',
components:{App}
})
- 主入口（App.vue）
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<div v-on:click="goIndex">首頁</div>
<div v-on:click="goDetail">詳情頁</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
methods:{
goIndex(){
this.$router.push({name:'index'});
},
goDetail(){
this.$router.push({name:'detail'});
}
}
}
</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>
- 請求資料
import axios from 'axios';
export default {
name: "Detail",
created() {
axios({method: 'post',url:'',data:{}}).then(res=>{
console.log(res.data);
}).catch(err=>{
console.log(err);
})
}
}
- 基礎指令
- v-on 綁定事件
- v-bind 綁定屬性
- v-model 雙向綁定
<div>{{msg}}</div>
<input type="text" v-model='msg'>
- v-for 循壞渲染
<div v-for=(item,index) in items>
{{item.title}}
</div>
三、學習總結
- 先建立一個檔案夾作為項目根路徑，然後從編輯器打開，在控制台使用相關下載下傳指令，但是 Vue 是先下載下傳 @vue/cli，然後使用 vue 指令去下載下傳項目，是以在運作( npm run serve)的時候記得要到下一層目錄。
- 在引入 Vue 的時候用這種形式，import Vue from ‘vue/dist/vue.js’，腳手架下下來的是 import Vue from ‘vue’。
- 在 new 路由執行個體的時候，不是在配置路由路徑的時候，比如如下的 route/index.js 中，而是在 main.js 中。
- v-for 指令使用 index 索引應該是 v-for=(item,index) in items 而不是 v-for=(index,item) in items。看有的部落格上就寫成了這種。
- 使用 v-bind 綁定 class ，内部是變量而不是 class 樣式。比如 v-bind:class="[isTrue?active:noActive]" 中的 active 和 noActive 均為變量，而不是 class 名。
- 在配置路由時，如果需要設定預設路由，可使用 redirect 重定向，請參考以上路由配置代碼。