nuxt element dashboard下載 - nuxt element dashboard原始碼下載

nuxt element dashboard

其他類別

v2.4.3

下載

Notice

This repo is no longer maintained，please use https://github.com/FEMessage/create-nuxt-app

nuxt2 + element dashboard

Feature

在Nuxt.js的基礎上，整合以下技術堆疊：

UI庫：element-ui
ajax庫： axios
css預處理器：less
程式碼格式化：prettier
環境變數: dotenv

⬆ Back to Top

快速開始

 # 安装依赖
yarn

# 使用mock接口进行开发
yarn mock

# 使用mock接口进行开发，且不会有登录拦截
yarn mock:nologin

# 使用后端接口进行开发
yarn dev

# 使用webpack进行生产构建
yarn build

# 生成静态站点
yarn generate

⬆ Back to Top

工程結構

├── README.md
├── doc
│   └── dev.md
├── nuxt.config.js         框架配置文件
├── package.json
├── src                    开发目录
│   ├── assets             资源，包括样式文件与图片
│   │   ├── global.less    全局样式类
│   │   └── var.less       样式变量，支持less变量自动引入，即不用在less中import就能直接使用变量
│   ├── components         业务无关的可复用的组件
│   ├── const              常量文件
│   │   ├── api.js         定义api路径
│   │   ├── path.js        定义页面跳转路径
│   │   └── cookie-keys.js cookie key管理
│   ├── container          业务有关的vue组件
│   ├── layouts            可复用的页面布局
│   │   ├── default.vue
│   │   └── login.vue
│   ├── middleware         自定义函数，会在每个页面渲染前执行
│   │   └── auth.js        路由鉴权中间件
│   ├── mixins             可复用的“织入”页面的代码片断
│   ├── pages              应用视图 & 路由名称，每个文件都对应一个路由视图，开发者框无需手动维护路由文件
│   │   ├── index.vue
│   │   └── login.vue
│   ├── plugins            应用插件，在Vue.js 初始化前运行，可在这里引入第三方类库
│   │   ├── axios.js       请求拦截
│   │   └── element.js     引入element-ui
│   └── store              Vuex状态管理文件
│       └── index.js
├── static                 静态资源
│   ├── README.md
│   └── favicon.ico
└── yarn.lock

⬆ Back to Top

開發

新頁面

Nuxt.js 會依據pages目錄中的所有*.vue檔案產生所應用的路由配置

在pages目錄下新建一個名為hello.vue的頁面

 < template >
  < h1 > Hello world! </ h1 >
</ template >

即可在http://localhost:3000/hello 造訪新建的頁面

⬆ Back to Top

呼叫介面

使用this.$axios調用介面：

建議使用$get $post $[methods]等方法，respone中會直接傳回請求的body
可以在*.vue檔案中的生命週期鉤子函數中調用
可以在methods裡調用
可以在store/*.js的actions裡調用

 // vue文件
export default {
  mounted ( ) {
    this . $axios . $get ( url )
  } ,
  methods : {
    fetchData ( ) {
      this . $axios . $get ( url )
    }
  }
}

 // store/index.js
export const actions = {
  async fetchData ( { commit } , { params } ) {
    let resp = await this . $axios . $get ( url , { params } )
    commit ( 'update' , resp )
  }
}

⬆ Back to Top

CRUD

注意方法前有$

 // GET 请求
this . $axios . $get ( '/users' , { params : { key : value } )
. then ( resp => {
} )
. catch ( e => { } )

 // POST 请求
this . $axios . $post ( '/user' , {
    firstName : 'Fred' ,
    lastName : 'Flintstone'
  } )
 . then ( resp => {
  } )
. catch ( e => { } )

 // PUT 请求
this . $axios . $put ( '/user/1' , {
    firstName : 'Fred' ,
    lastName : 'Flintstone'
  } )
 . then ( resp => {
  } )
. catch ( e => { } )

 // DELETE 请求
this . $axios . $delete ( '/user/1' )
 . then ( resp => {
  } )
. catch ( e => { } )

 // 或
this . $axios ( {
  method : 'delete' ,
  url : '/users' ,
  data : {
    rows : [ 1 , 2 ] ,
  }
} )

⬆ Back to Top

設定代理

開發時，api使用的都是相對路徑，透過代理來解決跨域問題。

在nuxt.config.js中找到config變量，修改mock設定：

env: {
    mock: {
      ' /api ' : ' http://mock.api.server ' ,
    },
    dev: {
      ' /api ' : ' http://real.api.server ' ,
    }
  }

則對於所有以/api開頭的請求：

在yarn mock模式下，都會變成http://mock.api.server/api
在yarn dev模式下，都會變成http://real.api.server/api

注意，每次修改代理設置，都需要重新啟動應用程式才能生效

⬆ Back to Top

環境變數

使用.env設定環境變數, 即在專案根目錄新建一個.env檔, 填寫環境變數即可。

注意，該文件不能提交至版本控制系統中。

.env檔範例:

 # 左边是变量名(一般大写，下划线分割单词)，右边是变量值
# 注意=号两边不能有空格
TESTING_VAR=just-fot-testing
ANOTHER_VAR=another

可以在專案的vue檔或js檔中讀取

 mounted ( ) {
  console . log ( process . env . TESTING_VAR ) // 输出 just-fot-testing
}

自帶的環境變數說明

環境變數名	說明	是否必須	預設值	範例
PUBLIC_PATH	對應webpack的publicPath，用於指定靜態檔案存取路徑	是		http://cdn.deepexi.com
API_SERVER	axios的baseURL，可不傳。不傳時，使用相對路徑發送請求	否		https://www.easy-mock.com
NO_LOGIN	是否登陸攔截，傳1則不會有登入攔截	否		1
COOKIE_PATH	用於設定cookie的path，如果多個項目需要共用cookie，則應該保證項目在共同的目錄下，並設定COOKIE_PATH為它們的共同目錄位址	否	/	/xpaas