nuxt element dashboard

สังเกต

repo นี้ไม่ได้รับการดูแลรักษาอีกต่อไป โปรดใช้ https://github.com/FEMessage/create-nuxt-app

แดชบอร์ดองค์ประกอบ nuxt2 +

สารบัญ

• คุณสมบัติ
• เริ่มต้นอย่างรวดเร็ว
• โครงสร้างทางวิศวกรรม
• พัฒนา
  • สร้างเพจใหม่
  • อินเตอร์เฟซการโทร
  • CRUD
  • ตั้งค่าพร็อกซี
• ตัวแปรสภาพแวดล้อม
• สร้าง
• ใบอนุญาต

คุณสมบัติ

จาก Nuxt.js สแต็กเทคโนโลยีต่อไปนี้จะถูกรวมเข้าด้วยกัน:

• ไลบรารี UI: องค์ประกอบ-ui
• ไลบรารีอาแจ็กซ์: axios
• ตัวประมวลผลล่วงหน้า css: น้อยกว่า
• การจัดรูปแบบโค้ด: สวยกว่า
• ตัวแปรสภาพแวดล้อม: dotenv

⬆กลับไปด้านบน

เริ่มต้นอย่างรวดเร็ว

 # 安装依赖
yarn

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

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

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

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

# 生成静态站点
yarn generate

⬆กลับไปด้านบน

โครงสร้างทางวิศวกรรม

├── 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

⬆กลับไปด้านบน

พัฒนา

สร้างเพจใหม่

Nuxt.js จะสร้างการกำหนดค่าการกำหนดเส้นทางของแอปพลิเคชันตามไฟล์ *.vue ทั้งหมดในไดเร็กทอรี pages

สร้างเพจใหม่ชื่อ hello.vue ในไดเร็กทอรี pages

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

คุณสามารถเข้าถึงเพจที่สร้างขึ้นใหม่ได้ที่ http://localhost:3000/hello

⬆กลับไปด้านบน

อินเตอร์เฟซการโทร

ใช้ this.$axios เพื่อเรียกอินเทอร์เฟซ:

• ขอแนะนำให้ใช้ $get $post $[methods] และวิธีการอื่นๆ เนื้อหาการตอบกลับจะส่งคืนเนื้อหาที่ร้องขอโดยตรง
• สามารถเรียกได้ในฟังก์ชัน life cycle hook ในไฟล์ *.vue
• สามารถเรียกได้ด้วย methods
• สามารถเรียกใช้ใน actions ของ store/*.js

 // 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 )
  }
}

⬆กลับไปด้านบน

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 ] ,
  }
} )

⬆กลับไปด้านบน

ตั้งค่าพร็อกซี

ในระหว่างการพัฒนา API จะใช้เส้นทางสัมพัทธ์และใช้พรอกซีเพื่อแก้ไขปัญหาข้ามโดเมน

ค้นหาตัวแปร config ใน nuxt.config.js และแก้ไขการตั้งค่า mock :

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

จากนั้นสำหรับคำขอทั้งหมดที่ขึ้นต้นด้วย /api :

1. ในโหมด yarn mock มันจะกลายเป็น http://mock.api.server/api

2. ในโหมด yarn dev มันจะกลายเป็น http://real.api.server/api

โปรดทราบว่าทุกครั้งที่คุณแก้ไขการตั้งค่าพร็อกซี คุณจะต้องรีสตาร์ทแอปพลิเคชันจึงจะมีผล

⬆กลับไปด้านบน

ตัวแปรสภาพแวดล้อม

ใช้ .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	สอดคล้องกับ publicPath ของ webpack ซึ่งใช้เพื่อระบุเส้นทางการเข้าถึงไฟล์แบบคงที่	ใช่		http://cdn.deepexi.com
API_SERVER	ไม่จำเป็นต้องส่ง baseURL ของ axios เมื่อไม่ผ่าน ให้ใช้เส้นทางสัมพันธ์เพื่อส่งคำขอ	เลขที่		https://www.easy-mock.com
NO_LOGIN	ไม่ว่าจะสกัดกั้นการเข้าสู่ระบบ หากผ่าน 1 จะไม่มีการสกัดกั้นการเข้าสู่ระบบ	เลขที่		1
COOKIE_PATH	เส้นทางที่ใช้ในการตั้งค่าคุกกี้ หากหลายโครงการจำเป็นต้องแชร์คุกกี้ พวกเขาควรตรวจสอบให้แน่ใจว่าโครงการนั้นอยู่ในไดเร็กทอรีทั่วไปและตั้งค่า COOKIE_PATH เป็นที่อยู่ไดเร็กทอรีทั่วไป	เลขที่	-	/xpaas

⬆กลับไปด้านบน

สร้าง

โครงสร้างจะอ่านไฟล์ .env ในไดเร็กทอรีรากเพื่อรับตัวแปรสภาพแวดล้อม โดยค่าเริ่มต้น สปาในโหมดการกำหนดเส้นทางแฮชจะถูกสร้างขึ้น และไฟล์สแตติกจะถูกส่งออกในไดเร็กทอรี dist

คำสั่งมีดังนี้:

yarn build

ใบอนุญาต

เอ็มไอที

⬆กลับไปด้านบน