生活随笔
收集整理的這篇文章主要介紹了
vue开发：前端项目模板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
簡介
- vue-cli創建vue項目，整合vuex、vue-router、axios、element-ui
- 項目模板下載地址
創建項目
Java+前端項目合集
- 使用vue-cli創建項目，功能選擇：Babel、Router、vuex、Linter/Formatter、使用配置文件（文章轉載自樂字節）
- 插件選擇vue-cli-plugin-element
- 安裝運行依賴axios
- 使用命令安裝開發依賴：less、less-loader
npm install less
npm install less-loader@5.0.0
預期效果
- 訪問根路徑時重定向到歡迎頁面
- **點擊側邊欄子節點時，路由自動發生改變，且跳轉到不同的子組件
**
- 點擊【書籍信息】，跳轉到bookList.vue，向后端服務器發送axios請求，獲取數據，遍歷到頁面
初始化項目
- 查看package.json中dependencies表示安裝的運行依賴，devDependencies表示安裝的開發依賴
- plugins文件夾下的element.js表示element-ui插件配置成
- 刪除router文件夾中index.js中默認生成的代碼，同時刪除views文件夾及子組件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({routes
})
export default router
- store文件夾表示vuex配置成功，用于共享數據
- 刪除根組件App.vue中默認生成的代碼，同時刪除components文件夾中的子組件
<template><div id="app">app根組件</div>
</template>
<script>
export default {name: 'app'
}
</script>
<style>
</style>
- 編寫全局樣式global.css，在main.js中導入
- 最后在終端中輸入命令，啟動項目，瀏覽器訪問該項目，查看是否報錯，
element-ui
- element-ui使用步驟參考
- 使用element-ui布局
// 在當前項目element.js中已將所有element-ui組件全部引入了，直接使用即可
import Element from
'element-ui'
import
'element-ui/lib/theme-chalk/index.css'
Vue.
use(Element
)
<!-- 默認展開的子節點 -->
<
el-menu :default-openeds=
"['1', '3']">
<!-- 默認選中的子節點 -->
<
el-menu :default-active=
"['1-1']">
<!-- 圖標 -->
<i class=
"el-icon-coin"></i>
<!-- 一級菜單-->
index=
"4"
<!-- 二級菜單 -->
index=
"5-1"
<!-- 三級菜單 -->
<el-menu-item index=
"4-1-2">
<!-- 默認選中顏色 -->
<el-menu active-text-color=
"#409EFF"<!-- 默認只展開一個子節點 -->
<el-menu unique-opened>
Router
<!-- 1. App.vue中開啟側邊欄路由 -->
<el-menu router><!-- 2. 子節點中設置path -->
<
el-menu-item :index=
"'/userList'"><!-- 3. 新建子組件，如userList.vue等，并在router中配置路由規則 -->
axios
- axios使用：main.js中引入axios，默認配置，注冊為vue實例的屬性
- 新建一個bookList.vue組件，發送axios請求，將返回的數據遍歷到頁面
<script>
export default {data() {return {books: []
}},created(){// 將vue對象賦值給_thisconst _this = this
;_this.$http.get("book/findAll/3/4").then(function(response){// then方法中的this表示responseconsole.
log(response.data.content
)_this.books = response.data.content
;});}
}
</script>
vuex
// 1. 構建項目時已經打開了vuex功能// store/index.js
import Vuex from 'vuex' // 2. 引入
Vue.use(Vuex) // 3. 注冊為vue實例的組件
export default new Vuex.Store({state: {count: 0 // 4. store中皴法共享數據
},mutations: {},actions: {},modules: {}
})// 入口文件main.js
import store from './store'
new Vue({store
, // 5. 將store掛載到vue實例
render: h =>
h(App
)
}).$mount('#app')// 在bookList.vue中使用
<span>vuex使用：{{ $store.state.count
}}</span>
（文章轉載自樂字節）
總結
以上是生活随笔為你收集整理的vue开发：前端项目模板的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
