<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                [TOC] >[success] # 響應式布局 本章主要對 **頁面布局** 來進行一些學習,包括 **3** 個內容: 1. **vue-cli3.0** 中使用 **iview** 2. **布局組件** 的使用 3. **柵格組件** 實現 **響應式布局** >[success] ## vue-cli3.0 中使用 iview 接下來講解如何在 **vue-cli3.0** 中如何引入 **iview** ,以及如何 **配置** 它的 **iview-loader** ,如何 **全局引入** 、 **按需引入 iview** 。之前很多開發者都使用過 **iview** ,那么在 **vue-cli3.0** 中對 **iview** 的 **配置有一些改變** ,主要是在 **iview-loader** 這的 **配置有改變** ,因為在 **vue-cli3.0** 生成的項目中,是 **沒有 webpack 配置文件** 的 ,所以需要在 **vue.config.js** 里面去配置 **iview-loader** 。 1. **首先用 npm 安裝 iview** 如果是 **iview 3.1.0** 版本,我們可以使用 **vue ui** 進行安裝,步驟如下: 1. 執行指令 ~~~ vue ui ~~~ 2. 打開界面后選擇要安裝 **iview** 的項目 ![](https://img.kancloud.cn/a7/b2/a7b219d4b55d46c88a985df1dd23c4b6_1920x937.png) 3. 點擊 **插件 > 添加插件** ![](https://img.kancloud.cn/57/64/576443503fbc8fb1647ec860e4e7ac92_1920x937.png) 4. 搜索插件進行安裝 ![](https://img.kancloud.cn/74/84/748479874c1fae9e3e415b9391cf4105_1920x937.png) 5. 出現下面界面就進行安裝了 ![](https://img.kancloud.cn/5c/60/5c60e739e3b49502a3fa1df1a9195bfb_1074x624.png) 6. 安裝成功后會讓勾選3個選項, 如下圖: 選項1:**你想如何導入 ViewUI(iView)?** 默認是 **全局導入** 選項2:**你想覆蓋 ViewUI(iView) 的 Less 變量嗎?** 默認 **否** 選項3:**選擇要加載的語言環境** 默認 **zh-CN** ![](https://img.kancloud.cn/6e/8b/6e8b6d0388508cbad6de51510b0dcf72_1920x937.png) 此時直接勾選下方 **完成安裝按鈕** 即可。 7. 也可以用**npm 指令安裝方式** ~~~ npm install iview ~~~ 2. **全局引入iview** **全局引入介紹** : **一次性引入全部 iview 組件** 。 在項目入口文件 **src\main.js** 中需要配置如下: **src\main.js** ~~~ import Vue from 'vue' import iview from 'iview' // 引入iview import 'iview/dist/styles/iview.css' // 引入iview樣式 Vue.use(iview)?//?iview作為插件,需要用Vue.use方法來引入 ~~~ 3. **按需引入** **按需引入介紹**: **iview** 中有很多 **組件** ,項目中有些 **組件** 可能用不到,如果使用 **全局引入** 的方式,就會 **增大了編譯后的文件體積** ,所以可以使用 **按需引入** , 用哪個 **組件** ,就在 **全局里把它引入**,然后 **打包后的文件體積就會小很多** ,如果項目基本上用到所有組件,還是用**全局引入**。 1. 首先你需要 **安裝一個 babel 插件** ~~~ npm install babel-plugin-import --save-dev ~~~ 2. 在 **vue-cli3.0** 生成的項目中,**babel** 的配置文件 **babel.config.js**,**默認配置** 是這樣的: ~~~ module.exports = { presets: [ '@vue/app' ] } ~~~ 需要把剛剛安裝的插件添加進去,添加后的內容如下: ~~~ module.exports = { presets: [ '@vue/app' ], 'plugins': [['import', { 'libraryName': 'iview', // 倉庫名字 'libraryDirectory': 'src/components' // 倉庫的文件夾 }]] } ~~~ 3. 接下來在 **main.js** 里,可以這樣 **按需引入** : ~~~ import 'iview/dist/styles/iview.css' // iview的樣式文件還是要引入的 import { Button, Table } from 'iview' // 用ES6的解構賦值,來按需引入使用的組件 Vue.component('Button', Button) // 注冊組件,Vue.component('組件名字', 引進來的組件) ~~~ 4. **需要注意** 問題:在 **非template/render模式** 下,包括 **JSX** 寫法中,**組件名** 要用 **分隔形式**,如 **DataPicker** 要寫為 **data-picker** ,而對于 **iview** 中名稱和 **原生HTML標簽** 相同的 **組件**,需要加 **i-前綴** ,如 **Button** 要寫成 **i-button**。 解決辦法: **我們可以通過配置 iview-loader 來解決 Switch 在任何模式下都必須寫為 i-switch ,Cirele要寫為 i-cirele的問題。** 4. **vue-cli3.0中配置iview-loader** 1. 首先需要 **安裝 iview-loader** ~~~ npm install iview-loader --save-dev ~~~ 2. 在 **vue.config.js** 中添加 **iview-loader** ~~~ const path = require('path') // 引入nodejs的path模塊 const resolve = dir => path.join(__dirname, dir) // resolve方法用來加載路徑 const BASE_URL = process.env.NODE_ENV === 'production' ? '/iview-admin/' : '/' // 判斷當前為開發環境還是打包環境, '/'意思是代表指定在域名的根目錄下,如果要指定到iview-admin下就這樣寫'/iview-admin/', production為生產壞境,development為開發環境 module.exports = { lintOnSave: false, // 取消每次保存時都進行一次' ESLint '檢測 publicPath: BASE_URL, // 項目的基本路徑,vuecli2.0時打包經常靜態文件找不到,就是需要配置這個屬性為'./' chainWebpack: config => { // 配置Webpack config.resolve.alias .set('@', resolve('src')) // 引入文件時候“ @ ”符號就代表src .set('_c', resolve('src/components')) // 引入組件文件夾中的文件就可以用“ _c ”代替src/components config.module // 添加iview-loader .rule('vue') .use('iview') .loader('iview-loader') .options({ prefix: false }) }, productionSourceMap: false, // 打包時不生成.map文件,會減少打包體積,同時加快打包速度 devServer: { // 跨域有2種解決方案: 1. 在后端的header中配置, 2. 使用devServer來配置代理解決跨域 proxy: 'http://localhost:3000/' // 這里寫需要代理的URL,這里會告訴開發服務器,將任何未知請求匹配不到靜態文件的請求,都代理到這個URL來滿足跨域 } } ~~~ 在 **chainWebpack** 中 **鏈式調用** 方法來添加 **iview-loader** ,這樣使用組件時候就可以不寫 **i-前綴** 了。 5. **注意** 如果使用的是 **全局引入** ,不要配置這個 **babel插件** ,如果配置了 **babel插件** ,會在 **main.js** ,**報一個錯誤:import iview from 'iview' 它會報 iview 為 undefined** >[success] ## 布局組件的使用 使用 **iview** 中的 **layout組件** 來進行一個 **頁面的總體布局** ,里面包括幾個**組件**:**Header** 、 **Sider** 、 **Content** 、 **Footer** ,以及 **最外層** 的 **Layout** ,這 **5個組件** 。 >[success] ## 柵格組件實現響應式布局 使用 **iview** 的 **柵格組件(row、col)** ,來實現 **響應式布局** ,能夠 **根據網頁寬度實現不同的布局** 。 **實現效果圖**: ![](https://img.kancloud.cn/52/8d/528d4cbc5249234f3ee1db091b903289_1920x937.png) **GIF動圖**: 支持 **展開收起側邊欄** ,以及 **嵌套路由** 跳轉頁面 ![](https://img.kancloud.cn/4d/8b/4d8be99037f046173f6d5c92fe327bb0_1831x967.png) 1. **創建一個 layout.vue 文件** **src/views/layout.vue** ~~~ <template> <div class="layout-wrapper"> <Layout class="layout-outer"> <!-- 側邊欄 --> <Sider collapsible hide-trigger breakpoint="sm" v-model="collapsed"></Sider> <!-- 布局容器 --> <Layout> <!-- 頂部布局 --> <Header class="header-wrapper"> <Icon :class="triggerClasses" @click.native="handleCollapsed" type="md-menu" :size="32" /> </Header> <!-- 內容部分 --> <Content class="content-con"> <Card shadow class="page-card"> <!-- 做【嵌套路由】,用于展示子路由 --> <router-view /> </Card> </Content> </Layout> </Layout> </div> </template> <script> export default { data(){ return{ collapsed: false // 控制收縮變量 } }, computed: { triggerClasses(){ return [ 'trigger-icon', this.collapsed ? 'rotate' : '' ] } }, methods: { // 展開 / 收起 handleCollapsed(){ this.collapsed = !this.collapsed } } } </script> <style lang="scss"> .layout-wrapper,.layout-outer{ height: 100%; .header-wrapper{ background: #fff; box-shadow: 0 1px 1px 1px rgba($color: #000000, $alpha: .1); padding: 0 23px; .trigger-icon{ cursor: pointer; &.rotate{ transform: rotateZ(-90deg); transition: transform .3s ease; } } } .content-con{ padding: 10px; .page-card{ min-height: calc(100vh - 84px); } } } </style> ~~~ **嵌套路由** 頁面,**Home.vue** **src/views/Home.vue** ~~~ <template> <div class="home"> <Row> <i-col></i-col> </Row> <Row :gutter="10"> <i-col span="12"></i-col> <i-col span="12"></i-col> </Row> <Row :gutter="10" class="blue"> <i-col :md="6" :sm="12"></i-col> <i-col :md="6" :sm="12"></i-col> <i-col :md="6" :sm="12"></i-col> <i-col :md="6" :sm="12"></i-col> </Row> </div> </template> <style lang="scss"> .home{ .ivu-col{ height: 50px; background: pink; margin-top: 10px; background-clip: content-box; } .blue{ .ivu-col{ background: blue; background-clip: content-box; } } } </style> ~~~ 2. **在路由中配置,把 layout 作為首頁展示** **src/router/router.js** ~~~ import Home from '@/views/Home' import Layout from '@/views/layout' export default [ { // 把 Layout 作為首頁展示 path: '/', name: 'home', component: Layout, children: [ // 創建嵌套路由 { path: 'home', component: Home } ] }, { path: '/login', name: 'login', component: () => import('@/views/login.vue'), }, { path: '*', // * 符號,代表匹配任何的路徑 component: () => import('@/views/error_404.vue') } ] ~~~ 3. **調整頁面高度** 現在的 **頁面高度** 是 **0** ,如果想調整 **高度** ,需要調整 **app.vue** 頁面的 **高度** **src/App.vue** ~~~ <template> <div id="app"> <router-view /> </div> </template> <script> export default { name: 'App' } </script> <style lang="scss"> html,body,#app{ height: 100%; } body{ margin: 0; } </style> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看