nuxt element dashboard
v2.4.3
Ce dépôt n'est plus maintenu, veuillez utiliser https://github.com/FEMessage/create-nuxt-app
Basées sur Nuxt.js, les piles technologiques suivantes sont intégrées :
⬆Retour en haut
# 安装依赖
yarn
# 使用mock接口进行开发
yarn mock
# 使用mock接口进行开发，且不会有登录拦截
yarn mock:nologin
# 使用后端接口进行开发
yarn dev
# 使用webpack进行生产构建
yarn build
# 生成静态站点
yarn generate⬆Retour en haut
├── 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⬆Retour en haut
Nuxt.js générera la configuration de routage de l'application en fonction de tous les fichiers *.vue du répertoire pages .
Créez une nouvelle page nommée hello.vue dans le répertoire pages
< template >
< h1 > Hello world! </ h1 >
</ template >Vous pouvez accéder à la page nouvellement créée sur http://localhost:3000/hello
⬆Retour en haut
Utilisez this.$axios pour appeler l'interface :
$get $post $[methods] et d'autres méthodes. Le corps de la requête sera renvoyé directement en réponse.*.vuemethodsactions de 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 )
}
}⬆Retour en haut
Notez qu'il y a $ avant la méthode
// 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 ] ,
}
} )⬆Retour en haut
Pendant le développement, l'API utilise des chemins relatifs et des proxys pour résoudre les problèmes inter-domaines.
Recherchez la variable config dans nuxt.config.js et modifiez les paramètres mock :
env: {
mock: {
' /api ' : ' http://mock.api.server ' ,
},
dev: {
' /api ' : ' http://real.api.server ' ,
}
} Ensuite pour toutes les requêtes commençant par /api :
En mode yarn mock , il deviendra http://mock.api.server/api
En mode yarn dev , cela deviendra http://real.api.server/api
Notez que chaque fois que vous modifiez les paramètres du proxy, vous devez redémarrer l'application pour prendre effet.
⬆Retour en haut
Utilisez .env pour définir les variables d'environnement, c'est-à-dire créez un nouveau fichier .env dans le répertoire racine du projet et remplissez les variables d'environnement.
Notez que ce fichier ne peut pas être soumis à un système de contrôle de version.
Exemple de fichier .env :
# 左边是变量名(一般大写，下划线分割单词)，右边是变量值
# 注意=号两边不能有空格
TESTING_VAR=just-fot-testing
ANOTHER_VAR=anotherPeut être lu dans le fichier vue ou le fichier js du projet
mounted ( ) {
console . log ( process . env . TESTING_VAR ) // 输出 just-fot-testing
}La description de la variable d'environnement intégrée
| Nom de la variable d'environnement | illustrer | Est-ce nécessaire | valeur par défaut | Exemple |
|---|---|---|---|---|
| CHEMIN_PUBLIC | Correspond au publicPath du webpack, utilisé pour spécifier le chemin d'accès au fichier statique | Oui | http://cdn.deepexi.com | |
| API_SERVEUR | La baseURL d'axios n'a pas besoin d'être transmise. Lorsqu'il n'est pas transmis, utilisez des chemins relatifs pour envoyer des requêtes. | Non | https://www.easy-mock.com | |
| NO_LOGIN | S'il faut intercepter la connexion. Si 1 est passé, il n'y aura pas d'interception de connexion. | Non | 1 | |
| CHEMIN_COOKIE | Le chemin utilisé pour définir les cookies. Si plusieurs projets doivent partager des cookies, ils doivent s'assurer que les projets se trouvent dans un répertoire commun et définir COOKIE_PATH sur leur adresse de répertoire commune. | Non | / | /xpaas |
⬆Retour en haut
La build lira le fichier .env dans le répertoire racine pour obtenir les variables d'environnement. Par défaut, un spa en mode de routage de hachage est généré et les fichiers statiques sont générés dans dist .
La commande est la suivante :
yarn buildMIT
⬆Retour en haut
