簡(jiǎn)介

• vue-cli創(chuàng)建vue項(xiàng)目，整合vuex、vue-router、axios、element-ui
• 項(xiàng)目模板下載地址

創(chuàng)建項(xiàng)目

Java+前端項(xiàng)目合集

• 使用vue-cli創(chuàng)建項(xiàng)目，功能選擇：Babel、Router、vuex、Linter/Formatter、使用配置文件（文章轉(zhuǎn)載自樂(lè)字節(jié)）
  
  
  
  
  
• 插件選擇vue-cli-plugin-element
  
• 安裝運(yùn)行依賴axios
  
• 使用命令安裝開發(fā)依賴：less、less-loader

npm install less npm install less-loader@5.0.0

預(yù)期效果

• 訪問(wèn)根路徑時(shí)重定向到歡迎頁(yè)面
  
• **點(diǎn)擊側(cè)邊欄子節(jié)點(diǎn)時(shí)，路由自動(dòng)發(fā)生改變，且跳轉(zhuǎn)到不同的子組件

**

• 點(diǎn)擊【書籍信息】，跳轉(zhuǎn)到bookList.vue，向后端服務(wù)器發(fā)送axios請(qǐng)求，獲取數(shù)據(jù)，遍歷到頁(yè)面
  

初始化項(xiàng)目

• 查看package.json中dependencies表示安裝的運(yùn)行依賴，devDependencies表示安裝的開發(fā)依賴
• plugins文件夾下的element.js表示element-ui插件配置成
• 刪除router文件夾中index.js中默認(rèn)生成的代碼，同時(shí)刪除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配置成功，用于共享數(shù)據(jù)
• 刪除根組件App.vue中默認(rèn)生成的代碼，同時(shí)刪除components文件夾中的子組件

<template><div id="app">app根組件</div> </template> <script> export default {name: 'app' } </script> <style> </style>

• 編寫全局樣式global.css，在main.js中導(dǎo)入
• 最后在終端中輸入命令，啟動(dòng)項(xiàng)目，瀏覽器訪問(wèn)該項(xiàng)目，查看是否報(bào)錯(cuò)，

element-ui

• element-ui使用步驟參考
• 使用element-ui布局

// 在當(dāng)前項(xiàng)目element.js中已將所有element-ui組件全部引入了，直接使用即可 import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element)

• 容器布局

<!-- 默認(rèn)展開的子節(jié)點(diǎn) --> <el-menu :default-openeds="['1', '3']"> <!-- 默認(rèn)選中的子節(jié)點(diǎn) --> <el-menu :default-active="['1-1']"> <!-- 圖標(biāo) --> <i class="el-icon-coin"></i> <!-- 一級(jí)菜單--> index="4" <!-- 二級(jí)菜單 --> index="5-1" <!-- 三級(jí)菜單 --> <el-menu-item index="4-1-2"> <!-- 默認(rèn)選中顏色 --> <el-menu active-text-color="#409EFF"<!-- 默認(rèn)只展開一個(gè)子節(jié)點(diǎn) --> <el-menu unique-opened>

Router

• 路由使用步驟：1.構(gòu)建項(xiàng)目時(shí)已經(jīng)打開了router功能；2.新建子組件；3.router/index.js中配置路由規(guī)則；4.路由出口；5.main.js中router作為vue實(shí)例的屬性

• 編寫歡迎頁(yè)面

  • 訪問(wèn)根路徑時(shí)，顯示歡迎頁(yè)面
  • 新建一個(gè)welcome.vue
  • router/index.js中引入子組件welcome.vue，配置路由規(guī)則

• 側(cè)邊欄開啟路由

<!-- 1. App.vue中開啟側(cè)邊欄路由 --> <el-menu router><!-- 2. 子節(jié)點(diǎn)中設(shè)置path --> <el-menu-item :index="'/userList'"><!-- 3. 新建子組件，如userList.vue等，并在router中配置路由規(guī)則 -->

axios

• axios使用：main.js中引入axios，默認(rèn)配置，注冊(cè)為vue實(shí)例的屬性
• 新建一個(gè)bookList.vue組件，發(fā)送axios請(qǐng)求，將返回的數(shù)據(jù)遍歷到頁(yè)面

<script> export default {data() {return {books: []}},created(){// 將vue對(duì)象賦值給_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. 構(gòu)建項(xiàng)目時(shí)已經(jīng)打開了vuex功能// store/index.js import Vuex from 'vuex' // 2. 引入 Vue.use(Vuex) // 3. 注冊(cè)為vue實(shí)例的組件 export default new Vuex.Store({state: {count: 0 // 4. store中皴法共享數(shù)據(jù)},mutations: {},actions: {},modules: {} })// 入口文件main.js import store from './store' new Vue({store, // 5. 將store掛載到vue實(shí)例render: h => h(App) }).$mount('#app')// 在bookList.vue中使用 <span>vuex使用：{{ $store.state.count }}</span>

（文章轉(zhuǎn)載自樂(lè)字節(jié)）

總結(jié)

以上是生活随笔為你收集整理的vue开发：前端项目模板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。