十八.Webpack中使用Vue
本文最后更新于 1824 天前,其中的信息可能已经有所发展或是发生改变。

1.Webpack中使用Vue

  1. 运行cnpm i vue -S将vue安装为运行依赖;
  2. 导入vue
    import Vue from 'vue'
    

    注意: 在 webpack 中, 使用 import Vue from 'vue' 导入的 Vue 构造函数,功能不完整,只提供了 runtime-only 的方式,并没有提供像网页中那样的使用方式;

    方式一:import Vue from '../node_modules/vue/dist/vue.js'
    方式二:配置webpack.config.js

    resolve: {
        alias: { // 修改 Vue 被导入时候的包的路径
          "vue$": "vue/dist/vue.js"
        }
      }
    
  • 包的查找规则:
    1. 找 项目根目录中有没有 node_modules 的文件夹
    2. 在 node_modules 中 根据包名,找对应的 vue 文件夹
    3. 在 vue 文件夹中,找 一个叫做 package.json 的包配置文件
    4. 在 package.json 文件中,查找 一个 main 属性【main属性指定了这个包在被加载时候,的入口文件】

2.webpack中使用Vue组件

  • 默认,webpack 无法打包 .vue 文件,需要安装 相关的loader:
    • cnpm i vue-loader vue-template-compiler -D
  • 在配置文件中,新增loader哦配置项
    { test:/\.vue$/, use: 'vue-loader' }
  • 导入 login 组件
    import login from './login.vue'
  • 在 webpack 中,如果想要通过 vue, 把一个组件放到页面中去展示,vm 实例中的 render 函数可以实现
    render: function (createElements) {
    return createElements(login)
    }
  • 简写`render: c => c(login)'

3.ES6中语法使用总结

  1. 使用 export defaultexport 导出模块中的成员;
    var defobj={
    name:"23",
    id:"2"
    }
    export default defobj
    export var obj2={
    bsd:"555"
    }
    export var obj1={
    name:"4"
    }
    
  2. 使用 import ** from ** 还有 import {a, b} from '模块标识' 导入其他模块
    import def,{obj1,obj2} from './js/testexport.js'

注意: export default 向外暴露的成员,可以使用任意的变量来接收
在一个模块中,export default 只允许向外暴露1次
在一个模块中,可以同时使用 export default 和 export 向外暴露成员
使用 export 向外暴露的成员,只能使用 { } 的形式来接收,这种形式,叫做 【按需导出】
export 可以向外暴露多个成员, 同时,如果某些成员,我们在 import 的时候,不需要,则可以 不在 {} 中定义
使用 export 导出的成员,必须严格按照 导出时候的名称,来使用 {} 按需接收;
使用 export 导出的成员,如果 就想 换个 名称来接收,可以使用 as 来起别名;

4.在vue组件页面中,集成vue-router路由模块

  1. 安装vue-router
    npm install vue-router -S
  2. 导入路由模块:
    import VueRouter from 'vue-router'
  3. 安装路由模块:
    Vue.use(VueRouter);
  4. 导入需要展示的组件:
import account from './main/Account.vue'
  1. 抽取路由模块到router.js
    import VueRouter from 'vue-router'
    import com1 from '../components/tmp1.vue' 
    import com2 from '../components/tmp2.vue'
    import com3 from '../components/tmp3.vue'
    import com31 from '../components/tmp31.vue'
    import com32 from '../components/tmp32.vue'
    
    var router = new VueRouter({
    routes: [
      {path:'/',components:{
        'comt1':com1,
        'comt2':com2,
        'comt3':com3
      }},    
      { path: '/com1', component: com1 },
      { path: '/com2', component: com2 },
      { path: '/com3', component: com3 ,
      children:[
        {path:'com31',component:com31},
        {path:'com32',component:com32}
      ]
    }
    ]
    })
    // 把路由对象暴露出去
    export default router
    
  2. main.js导入
    import router from './js/router.js'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    
    var vm1 = new Vue({
    el: "#app2",
    router
    })
    

5.使用webpack打包发布项目

在项目上线之前,我们需要将整个项目打包并发布。
A.配置package.json
"scripts":{
"dev":"webpack-dev-server",
"build":"webpack -p"
}
B.在项目打包之前,可以将dist目录删除,生成全新的dist目录

作者:Yuyy
博客:https://yuyy.info
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇