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 は、 pagesディレクトリ内のすべての*.vueファイルに基づいてアプリケーションのルーティング構成を生成します。
pagesディレクトリにhello.vueという名前の新しいページを作成します。
< template >
< h1 > Hello world! </ h1 >
</ template >http://localhost:3000/hello で新しく作成されたページにアクセスできます。
⬆トップに戻る
this.$axios使用してインターフェイスを呼び出します。
$get $post $[methods]およびその他のメソッドを使用することをお勧めします。リクエスト本文は応答として直接返されます。*.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 )
}
}⬆トップに戻る
メソッドの前に $ があることに注意してください
// 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 は相対パスを使用し、プロキシを使用してクロスドメインの問題を解決します。
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になります。
プロキシ設定を変更するたびに、有効にするためにアプリケーションを再起動する必要があることに注意してください。
⬆トップに戻る
.env を使用して環境変数を設定します。つまり、プロジェクトのルート ディレクトリに新しい .env ファイルを作成し、環境変数を設定します。
このファイルはバージョン管理システムに送信できないことに注意してください。
.env ファイルの例:
# 左边是变量名(一般大写，下划线分割单词)，右边是变量值
# 注意=号两边不能有空格
TESTING_VAR=just-fot-testing
ANOTHER_VAR=anotherプロジェクトのvueファイルまたはjsファイルで読み取ることができます
mounted ( ) {
console . log ( process . env . TESTING_VAR ) // 输出 just-fot-testing
}組み込みの環境変数の説明
| 環境変数名 | 説明する | 必要ですか | デフォルト値 | 例 |
|---|---|---|---|---|
| パブリックパス | Webpack の publicPath に対応し、静的ファイルのアクセス パスを指定するために使用されます。 | はい | http://cdn.deepxi.com | |
| API_サーバー | axios の BaseURL を渡す必要はありません。渡されない場合は、相対パスを使用してリクエストを送信します。 | いいえ | https://www.easy-mock.com | |
| NO_LOGIN | ログインを傍受するかどうか。1 を渡すと、ログインは傍受されません。 | いいえ | 1 | |
| クッキー_パス | Cookie の設定に使用されるパス。複数のプロジェクトが Cookie を共有する必要がある場合は、プロジェクトが共通のディレクトリにあることを確認し、COOKIE_PATH を共通のディレクトリ アドレスに設定する必要があります。 | いいえ | / | /xpaas |
⬆トップに戻る
ビルドはルート ディレクトリにある .env ファイルを読み取り、環境変数を取得します。デフォルトでは、ハッシュ ルーティング モードのスパが生成され、静的ファイルがdistディレクトリに出力されます。
コマンドは次のとおりです。
yarn buildマサチューセッツ工科大学
⬆トップに戻る
