vue開發：前端專案模板

簡介

vue-cli建立vue專案，整合vuex、vue-router、axios、element-ui
專案模板下載地址

建立專案

使用vue-cli建立專案，功能選擇：Babel、Router、vuex、Linter/Formatter、使用配置檔案
外掛選擇vue-cli-plugin-element
安裝執行依賴axios
使用命令安裝開發依賴：less、less-loader

npm install less

npm install [email protected]

初始化專案

檢視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.構建專案時已經打開了router功能；2.新建子元件；3.router/index.js中配置路由規則；4.路由出口；5.main.js中router作為vue例項的屬性
編寫歡迎頁面
1. 訪問根路徑時，顯示歡迎頁面
2. 新建一個welcome.vue
3. router/index.js中引入子元件welcome.vue，配置路由規則
側邊欄開啟路由

<!-- 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物件賦值給_this

        const _this = this;

        _this.$http.get("book/findAll/3/4").then(function(response){

            // then方法中的this表示response

            console.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開發：前端專案模板

vue開發：前端專案模板

簡介

建立專案

初始化專案

element-ui

Router

axios

vuex

最新文章