搭建webpack +babel + vue项目以及编写单文件和自定义组件

最新推荐文章于 2021-09-29 00:35:50 发布

痴心的萝卜

最新推荐文章于 2021-09-29 00:35:50 发布

阅读量545

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_36826618/article/details/104210047

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

                    
                        
                    
                    搭建webpack +babel + vue项目的操作步骤 
1. 新建一个存放项目的文件夹
 我新建的文件名为demoVue
2. 打开cmd，执行cd指令到该文件夹下
3. 可执行npm init命令，自己配置一下，我这边直接执行npm init -y，使用默认配置
 可以看见文件夹下面生成了一个package.json
 
3. 执行指令：cnpm i webpack webpack-cli vue-loader babel-core babel-loader -D
 没有cnpm的话百度一下，也是一大堆，或者就用npm，只不过会慢一点。这里需要安装webpack、webpack脚手架、vue-loader、以及babel-core和用来处理高版本js的babel-loader，-D的意思是开发环境，-S是生成环境
 
4. 在放项目的demoVue文件夹下创建一个webpack的配置文件——webpack.config.js
 webpack.config.js内容  const path = require('path')// webpack自动集成了path，所以可以直接用
  const {VueLoaderPlugin} = require('vue-loader')
  module.exports = {
      mode: 'development',
      entry: './index.js',// 入口文件
      output: {// 输出的一个对象
          filename: 'bundle.js',// 输出的名字
          path: path.resolve(__dirname, 'dist')//  输出的路径，当前目录下生产一个dist文件
      },
      plugins: [new VueLoaderPlugin()],// 因为VueLoaderPlugin和vue-loader分离了，所以要配置一下，不然会报错
      module: {
          rules: [// 定义规则
              {
                  test: /\.vue$/,// 以.vue结尾
                  loader: 'vue-loader'// 使用vue-loader
              },
              {
                  test: /\.js$/,// .js结尾的就用babel-loader
                  loader: 'babel-loader'
              }
          ]
      }
  }
 
5. 同样在放项目的demoVue文件夹下创建入口文件——index.js
 先不用放内容，看下后面能不能生成文件
6. 创建完成后可以通过终端输入webpack index.js试一下能不能运行成功了
 我这边报了个错，它的意思是你不应该使用6的版本，应该下载7版本
 
 那我把babel-loader更新到7，如果有同样报错终端上执行cnpm i babel-loader@7 -D
 
 再试了一下webpack index.js
 
 原因babel到了7版本后跟其他的东西一些分离了，所以还要下载cnpm i babel-preset-env -D
 在放项目的demoVue文件夹下创建文件 .babelrc
 .babeIrc内容  {
      "presets": ["env"]
  }
 然后终于成功了
 
 可以看见成功后，dist下多了一个生产的bundle.js文件
7. 安装vue，终端指令：cnpm i vue -D 以及 vue的模板编译的插件 cnpm i vue-template-compiler -D，因为这个插件和vue-loader到15版本以后也分离了
 
8. 在放项目的demoVue文件夹下新建文件——app.vue,并且配置一下index.js
 app.vue内容  <template>
      <div>
          这是app
      </div>
  </template>
  <script>
  export default {
      name: 'app'
  }
  </script>
 index.js内容  import Vue from 'vue'
  import App from './app.vue'
  new Vue({
      el: '#app',
      render: h => h(App)
  })
 
9. 最终测试 终端指令webpack index.js
 打包成功
 
 
单文件组件 
1. 上面步骤8中的app.vue就是一个单文件组件
2. 为了看下单文件及搭建完成后的效果，在demoVue文件夹下建了一个index.html
 index.html内容  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>
  <body>
      <div id="app"></div>
      <script src="./dist/bundle.js"></script>
  </body>
  </html> 
 将index.html用浏览器打开后的效果
 
当前项目整体结构
 demoVue
 |——dist（执行webpack index.js生成）
 |——node_modules（npm下载生成）
 |——.babeIrc
 |——app.vue
 |——index.html
 |——index.js
 |——package.json
 |——webpack.conig.js
 
自定义组件 
1. 在demoVue文件夹下新建一个文件夹component，在component文件夹下创建一个loading.vue的文件和一个index.js文件
 loading.vue内容  <template>
      <div>
          数据加载中...
      </div>
  </template>
 index.js内容  import loadingCom from './loading.vue'
  
  export default {
      install: (Vue) => {
          Vue.component('loading', loadingCom)
      }
  }
 
2. 编写一下外面入口文件的index.js并在app.vue引用自定义组件
 index.js内容
 在index.js中添加代码
 import Loading from ‘./component/index’
 Vue.use(Loading)  import Vue from 'vue'
  import App from './app.vue'
  import Loading from './component/index'// 添加这一行
  
  Vue.use(Loading)// 使用一下这个插件
  new Vue({
      el: '#app',
      render: h => h(App)
  })
 app.vue内容
 添加一个loading即可  <template>
      <div>
          这是app
          <loading></loading>
      </div>
  </template>
  <script>
  export default {
      name: 'app'
  }
  </script>
 记得保存，然后终端执行webpack index.js，打开index.html可以看到效果
  
  当前项目整体结构
 demoVue
 |——component
 |                |——index.js
 |                |——loading.vue
 |——dist（执行webpack index.js生成）
 |——node_modules（npm下载生成）
 |——.babeIrc
 |——app.vue
 |——index.html
 |——index.js
 |——package.json
 |——webpack.conig.js
 

                