WebPack 配置vue-cli

Vue-cli

注意：

有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass -D

在普通页面中使用render函数渲染组件

在webpack中配置.vue组件页面的解析

  1. 运行cnpm i vue -S将vue安装为运行依赖；

  2. 运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；

  3. 运行cnpm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式；

  4. 在webpack.config.js中，添加如下module规则：


module: {

    rules: [

      { test: /\.css$/, use: ['style-loader', 'css-loader'] },

      { test: /\.vue$/, use: 'vue-loader' }

    ]

  }
  1. 创建App.js组件页面：

    <template>

      <!-- 注意：在 .vue 的组件中，template 中必须有且只有唯一的根元素进行包裹，一般都用 div 当作唯一的根元素 -->

      <div>

        <h1>这是APP组件 - {{msg}}</h1>

        <h3>我是h3</h3>

      </div>

    </template>



    <script>

    // 注意：在 .vue 的组件中，通过 script 标签来定义组件的行为，需要使用 ES6 中提供的 export default 方式，导出一个vue实例对象

    export default {

      data() {

        return {

          msg: 'OK'

        }

      }

    }

    </script>



    <style scoped>

    h1 {

      color: red;

    }

    </style>
  1. 创建main.js入口文件：

    // 导入 Vue 组件

    import Vue from 'vue'



    // 导入 App组件

    import App from './components/App.vue'



    // 创建一个 Vue 实例，使用 render 函数，渲染指定的组件
        render: function (createElements) { 
         //   createElements 是一个 方法，调用它，能够把 指定的 组件模板，渲染为 html 结构
      return createElements(login)
        // 注意：这里 return 的结果，会 替换页面中 el 指定的那个 容器
         }

在使用webpack构建的Vue项目中使用模板对象？

  1. 在webpack.config.js中添加resolve属性：
resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

ES6中语法使用总结

  1. 使用 export default 和 export 导出模块中的成员; 对应ES5中的 module.exports 和 export

  2. 使用 import ** from ** 和 import '路径' 还有 import {a, b} from '模块标识' 导入其他模块

  3. 使用箭头函数：(a, b)=> { return a-b; }

// 这是 Node 中向外暴露成员的形式：
// module.exports = {}

// 在 ES6中，也通过 规范的形式，规定了 ES6 中如何 导入 和 导出 模块
//  ES6中导入模块，使用   import 模块名称 from '模块标识符'    import '表示路径'

// 在 ES6 中，使用 export default 和 export 向外暴露成员：
var info = {
  name: 'zs',
  age: 20
}

export default info

/* export default {
  address: '北京'
} */

// 注意： export default 向外暴露的成员，可以使用任意的变量来接收
// 注意： 在一个模块中，export default 只允许向外暴露1次
// 注意： 在一个模块中，可以同时使用 export default 和 export 向外暴露成员



export var title = '小星星'
export var content = '哈哈哈'

// 注意： 使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式，叫做 【按需导出】
// 注意： export 可以向外暴露多个成员， 同时，如果某些成员，我们在 import 的时候，不需要，则可以 不在 {}  中定义
// 注意： 使用 export 导出的成员，必须严格按照 导出时候的名称，来使用  {}  按需接收；
// 注意： 使用 export 导出的成员，如果 就想 换个 名称来接收，可以使用 as 来起别名；




// 在Node中 使用 var 名称 = require('模块标识符')
// module.exports 和 exports 来暴露成员

在vue组件页面中，集成vue-router路由模块

vue-router官网

  1. 导入路由模块：

import VueRouter from 'vue-router'
  1. 安装路由模块：

Vue.use(VueRouter);
  1. 导入需要展示的组件:

import login from './components/account/login.vue'

import register from './components/account/register.vue'
  1. 创建路由对象:

var router = new VueRouter({

  routes: [

    { path: '/', redirect: '/login' },

    { path: '/login', component: login },

    { path: '/register', component: register }

  ]

});
  1. 将路由对象，挂载到 Vue 实例上:

var vm = new Vue({

  el: '#app',

  // render: c => { return c(App) }

  render(c) {

    return c(App);

  },

  router // 将路由对象，挂载到 Vue 实例上

});
  1. 改造App.vue组件，在 template 中，添加router-link和router-view：

    <router-link to="/login">登录</router-link>

    <router-link to="/register">注册</router-link>



    <router-view></router-view>

组件中的css作用域问题

抽离路由为单独的模块

使用 饿了么的 MintUI 组件

Github 仓储地址

Mint-UI官方文档

  1. 导入所有MintUI组件：

import MintUI from 'mint-ui'
  1. 导入样式表：

import 'mint-ui/lib/style.css'
  1. 在 vue 中使用 MintUI中的Button按钮和Toast弹框提示：

Vue.use(MintUI)
  1. 使用的例子：

<mt-button type="primary" size="large">primary</mt-button>

Mint-UI中按需导入的配置方式

使用 MUI 代码片段

注意： MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的 成套的组件，可以无缝的和 VUE项目进行集成开发；
因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；
从体验上来说， MUI和Bootstrap类似；
理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目；

注意： MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用；

官网首页

文档地址

  1. 导入 MUI 的样式表：

import '../lib/mui/css/mui.min.css'
  1. 在webpack.config.js中添加新的loader规则：

{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }
  1. 根据官方提供的文档和example，尝试使用相关的组件

App.vue 组件的基本设置

  1. 头部的固定导航栏使用 Mint-UI 的 Header 组件；

  2. 底部的页签使用 mui 的 tabbar;

  3. 购物车的图标，使用 icons-extra 中的 mui-icon-extra mui-icon-extra-cart，同时，应该把其依赖的字体图标文件 mui-icons-extra.ttf，复制到 fonts 目录下！

  4. 将底部的页签，改造成 router-link 来实现单页面的切换；

  5. Tab Bar 路由激活时候设置高亮的两种方式：

  • 全局设置样式如下：

   .router-link-active{

       color:#007aff !important;

   }
  • 或者在 new VueRouter 的时候，通过 linkActiveClass 来指定高亮的类：

   // 创建路由对象

   var router = new VueRouter({

     routes: [

       { path: '/', redirect: '/home' }

     ],

     linkActiveClass: 'mui-active'

   });

实现 tabbar 页签不同组件页面的切换

  1. 将 tabbar 改造成 router-link 形式，并指定每个连接的 to 属性；

  2. 在入口文件中导入需要展示的组件，并创建路由对象：


    // 导入需要展示的组件

    import Home from './components/home/home.vue'

    import Member from './components/member/member.vue'

    import Shopcar from './components/shopcar/shopcar.vue'

    import Search from './components/search/search.vue'



    // 创建路由对象

    var router = new VueRouter({

      routes: [

        { path: '/', redirect: '/home' },

        { path: '/home', component: Home },

        { path: '/member', component: Member },

        { path: '/shopcar', component: Shopcar },

        { path: '/search', component: Search }

      ],

      linkActiveClass: 'mui-active'

    });

使用 mt-swipe 轮播图组件

  1. 假数据：

lunbo: [

        'http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg',

        'http://www.itcast.cn/images/slidead/BEIJING/2017511009514700.jpg',

        'http://www.itcast.cn/images/slidead/BEIJING/2017421414422600.jpg'

      ]
  1. 引入轮播图组件：

<!-- Mint-UI 轮播图组件 -->

    <div class="home-swipe">

      <mt-swipe :auto="4000">

        <mt-swipe-item v-for="(item, i) in lunbo" :key="i">

          <img :src="item" alt="">

        </mt-swipe-item>

      </mt-swipe>

    </div>

  </div>

在.vue组件中使用vue-resource获取数据

  1. 运行cnpm i vue-resource -S安装模块

  2. 导入 vue-resource 组件


import VueResource from 'vue-resource'
  1. 在vue中使用 vue-resource 组件

Vue.use(VueResource);

webpack.config.js

// 由于 webpack 是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的
var path = require('path')
// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
// 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点
var htmlWebpackPlugin = require('html-webpack-plugin')

// 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建
module.exports = {
  entry: path.join(__dirname, './src/main.js'), // 入口文件
  output: { // 指定输出选项
    path: path.join(__dirname, './dist'), // 输出路径
    filename: 'bundle.js' // 指定输出文件的名称
  },
  plugins: [ // 所有webpack  插件的配置节点
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
      filename: 'index.html' // 设置生成的内存页面的名称
    })
  ],
  module: { // 配置所有第三方loader 模块的
    rules: [ // 第三方模块的匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
      // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
      { test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
    ]
  },
  resolve: {
    alias: { // 修改 Vue 被导入时候的包的路径
      // "vue$": "vue/dist/vue.js"
    }
  }
}

main.js

import Vue from 'vue'
// 1. 导入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter 
Vue.use(VueRouter)

// 导入 app 组件
import app from './App.vue'

// 导入 自定义路由模块
import router from './router.js'

var vm = new Vue({
  el: '#app',
  render: c => c(app), // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中
  router // 4. 将路由对象挂载到 vm 上
})

// 注意： App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染 组件， 渲染出来的组件，只能放到 el: '#app' 所指定的 元素中；
// Account 和 GoodsList 组件， 是通过 路由匹配监听到的，所以， 这两个组件，只能展示到 属于 路由的 <router-view></router-view> 中去；

router.js

import VueRouter from 'vue-router'

// 导入 Account 组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

// 导入Account的两个子组件
import login from './subcom/login.vue'
import register from './subcom/register.vue'

// 3. 创建路由对象
var router = new VueRouter({
  routes: [
    // account  goodslist
    {
      path: '/account',
      component: account,
      children: [
        { path: 'login', component: login },
        { path: 'register', component: register }
      ]
    },
    { path: '/goodslist', component: goodslist }
  ]
})

// 把路由对象暴露出去
export default router
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • 使用webpack搭建一个前端项目
    Vue.js - Day5 - Webpack 在网页中会引用哪些常见的静态资源？ JS .js .jsx ....
    xuweiqiang阅读 6,839评论 0赞 8
  • Vue webpack搭建项目
    什么是 webpack 是前端的一个项目构建工具，他是基于 Node.js 开发出来的一个前端工具 如何完美实现上...
    千见阅读 5,373评论 0赞 0
  • 6. webpack和vue的结合
    注意： 有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass...
    xlystar阅读 1,027评论 0赞 0
  • 2018-07-31
    基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 4,911评论 0赞 1
  • vue个人笔记
    vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 8,518评论 1赞 22

友情链接更多精彩内容