nuxt element dashboard
v2.4.3
لم يعد يتم الاحتفاظ بهذا الريبو، يرجى استخدام https://github.com/FEMessage/create-nuxt-app
استنادًا إلى Nuxt.js، تم دمج مجموعات التكنولوجيا التالية:
⬆العودة إلى الأعلى
# 安装依赖
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] وطرق أخرى وسيتم إرجاع نص الطلب مباشرة في الرد.*.vuemethodsactions 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 )
}
}⬆العودة إلى الأعلى
لاحظ أن هناك $ قبل الطريقة
// 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 :
في الوضع yarn mock ، سيصبح http://mock.api.server/api
في وضع 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 الخاص بحزمة الويب، ويستخدم لتحديد مسار الوصول إلى الملف الثابت | نعم | http://cdn.deepexi.com | |
| API_SERVER | لا يلزم تمرير عنوان URL الأساسي الخاص بـ axios. عند عدم تمريره، استخدم المسارات النسبية لإرسال الطلبات. | لا | https://www.easy-mock.com | |
| NO_LOGIN | ما إذا كان سيتم اعتراض تسجيل الدخول إذا تم تمرير 1، فلن يكون هناك اعتراض لتسجيل الدخول. | لا | 1 | |
| ملف تعريف الارتباط_PATH | المسار المستخدم لتعيين ملفات تعريف الارتباط. إذا احتاجت مشاريع متعددة إلى مشاركة ملفات تعريف الارتباط، فيجب عليها التأكد من وجود المشاريع في دليل مشترك وتعيين COOKIE_PATH على عنوان الدليل المشترك الخاص بها. | لا | / | /xpaas |
⬆العودة إلى الأعلى
سيقرأ البناء ملف .env في الدليل الجذر للحصول على متغيرات البيئة افتراضيًا، يتم إنشاء منتجع صحي في وضع توجيه التجزئة، ويتم إخراج الملفات الثابتة في الدليل dist .
الأمر كما يلي:
yarn buildمعهد ماساتشوستس للتكنولوجيا
⬆العودة إلى الأعلى
