nuxt element dashboard
v2.4.3
Repo ini tidak lagi dikelola, silakan gunakan https://github.com/FEMessage/create-nuxt-app
Berdasarkan Nuxt.js, tumpukan teknologi berikut terintegrasi:
⬆Kembali ke Atas
# 安装依赖
yarn
# 使用mock接口进行开发
yarn mock
# 使用mock接口进行开发，且不会有登录拦截
yarn mock:nologin
# 使用后端接口进行开发
yarn dev
# 使用webpack进行生产构建
yarn build
# 生成静态站点
yarn generate⬆Kembali ke Atas
├── 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⬆Kembali ke Atas
Nuxt.js akan menghasilkan konfigurasi perutean aplikasi berdasarkan semua file *.vue di direktori pages .
Buat halaman baru bernama hello.vue di direktori pages
< template >
< h1 > Hello world! </ h1 >
</ template >Anda dapat mengakses halaman yang baru dibuat di http://localhost:3000/hello
⬆Kembali ke Atas
Gunakan this.$axios untuk memanggil antarmuka:
$get $post $[methods] dan metode lainnya. Badan permintaan akan dikembalikan secara langsung sebagai respons.*.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 )
}
}⬆Kembali ke Atas
Perhatikan bahwa ada $ sebelum metode ini
// 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 ] ,
}
} )⬆Kembali ke Atas
Selama pengembangan, API menggunakan jalur relatif dan menggunakan proxy untuk memecahkan masalah lintas domain.
Temukan variabel config di nuxt.config.js dan ubah pengaturan mock :
env: {
mock: {
' /api ' : ' http://mock.api.server ' ,
},
dev: {
' /api ' : ' http://real.api.server ' ,
}
} Kemudian untuk semua permintaan yang dimulai dengan /api :
Dalam mode yarn mock , ini akan menjadi http://mock.api.server/api
Dalam mode yarn dev , itu akan menjadi http://real.api.server/api
Perhatikan bahwa setiap kali Anda mengubah pengaturan proxy, Anda perlu memulai ulang aplikasi agar dapat diterapkan.
⬆Kembali ke Atas
Gunakan .env untuk mengatur variabel lingkungan, yaitu membuat file .env baru di direktori root proyek dan mengisi variabel lingkungan.
Perhatikan bahwa file ini tidak dapat dikirimkan ke sistem kontrol versi.
Contoh file .env:
# 左边是变量名(一般大写，下划线分割单词)，右边是变量值
# 注意=号两边不能有空格
TESTING_VAR=just-fot-testing
ANOTHER_VAR=anotherDapat dibaca di file vue atau file js proyek
mounted ( ) {
console . log ( process . env . TESTING_VAR ) // 输出 just-fot-testing
}Deskripsi variabel lingkungan bawaan
| Nama variabel lingkungan | menjelaskan | Apakah itu perlu | nilai bawaan | Contoh |
|---|---|---|---|---|
| PUBLIC_PATH | Sesuai dengan publicPath webpack, digunakan untuk menentukan jalur akses file statis | Ya | http://cdn.deepexi.com | |
| API_SERVER | BaseURL aksio tidak perlu diteruskan. Jika tidak lolos, gunakan jalur relatif untuk mengirim permintaan. | TIDAK | https://www.easy-mock.com | |
| TIDAK_LOGIN | Apakah akan mencegat login. Jika 1 dilewati, tidak akan ada intersepsi login. | TIDAK | 1 | |
| COOKIE_PATH | Jalur yang digunakan untuk menyetel cookie. Jika beberapa proyek perlu berbagi cookie, proyek tersebut harus memastikan bahwa proyek tersebut berada di direktori yang sama dan menyetel COOKIE_PATH ke alamat direktori yang sama. | TIDAK | / | /xpaas |
⬆Kembali ke Atas
Build akan membaca file .env di direktori root untuk mendapatkan variabel lingkungan. Secara default, spa dalam mode perutean hash dihasilkan, dan file statis dikeluarkan di direktori dist .
Perintahnya adalah sebagai berikut:
yarn buildMIT
⬆Kembali ke Atas
