资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/基于webpack的vue实例

基于webpack的vue实例

wums / 1296人阅读

摘要：配置文件根目录下创建文件中的对象，用于处理目录的对象，提高开发效率。引入我们编写的测试用文件。

这是我个人在学习vue+webpack的一个实例，希望对读者是有用的，同时也求大神指教。菜鸟第一次写这，水平有限。

目录结构

加载依赖

在这之前确保安装了node和npm

加载依赖

{
  "name": "05-five-vue",
  "version": "1.0.0",
  "description": "vue+webapck",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --hot --inline"
  },
  "dependencies": {
    "vue": "^1.0.18",
    "webpack": "^1.12.0"
  },
  "devDependencies": {
    "autoprefixer-loader": "^2.0.0",
    "babel": "^6.3.13",
    "babel-core": "^6.3.21",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-runtime": "^6.3.13",
    "babel-preset-es2015": "^6.3.13",
    "babel-runtime": "^5.8.34",
    "css-loader": "^0.16.0",
    "file-loader": "^0.8.5",
    "html-loader": "^0.3.0",
    "node-sass": "^3.4.2",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.12.3",
    "url-loader": "^0.5.6",
    "vue-html-loader": "^1.2.0",
    "vue-loader": "^7.2.0",
    "webpack": "^1.12.0",
    "webpack-dev-server": "^1.14.0"
  },
  "author": "guowenfh",
  "license": "MIT",
  "keywords": [
    "vue",
    "webpack"
  ]
}

在根目录下创建package.json文件，复制上面的代码，在根目录的DOS命令中运行npm install；

等待下载完后。

webpack配置文件

根目录下创建webpack.config.js文件

var path = require("path");
// NodeJS中的Path对象，用于处理目录的对象，提高开发效率。
var HtmlWebpackPlugin = require("html-webpack-plugin");
// 模块导入
module.exports = {
  entry: "./src/main.js",
  //定义webpack输出的文件，这里设置了让打包后生成的文件放在dist文件夹下的build.js文件中
  output: {
    path: path.join(__dirname, "./dist"),
    // 文件地址，使用绝对路径形式
    filename: "[name].js",
    //[name]这里是webpack提供的根据路口文件自动生成的名字
    publicPath: "/dist/"
    // 公共文件生成的地址
  },
  // 服务器配置相关，自动刷新!
  devServer: {
    historyApiFallback: true,
    hot: false,
    inline: true,
    port:9010
  },
  //加载器
  module: {
    // 加载器
    loaders: [
      // 解析.vue文件
      { test: /.vue$/, loader: "vue" },
      // 转化ES6的语法
      { test: /.js$/, loader: "babel", exclude: /node_modules/ },
      // 编译css并自动添加css前缀
      { test: /.css$/, loader: "style!css!autoprefixer"},
      //.scss 文件想要编译，scss就需要这些东西！来编译处理
      //install css-loader style-loader sass-loader node-sass --save-dev
      { test: /.scss$/, loader: "style!css!sass?sourceMap"},
      // 图片转化，小于8K自动转化为base64的编码
      { test: /.(png|jpg|gif)$/, loader: "url-loader?limit=8192"},
      //html模板编译？
      { test: /.(html|tpl)$/, loader: "html-loader" },
    ]
  },
  // .vue的配置。需要多带带出来配置
  vue: {
    loaders: {
      css: "style!css!autoprefixer",
      html:"html-loader"
    }
  },
  // 转化成es5的语法
  babel: {
    presets: ["es2015"],
    plugins: ["transform-runtime"]
  },
  resolve: {
    // require时省略的扩展名，如：require("module") 不需要module.js
    extensions: ["", ".js", ".vue"],
    // 别名，可以直接使用别名来代表设定的路径以及其他
    alias: {
      filter: path.join(__dirname, "./src/filters"),
      components: path.join(__dirname, "./src/components")
    }
  },
    //插件
    plugins: [
        //根据模板插入css/js等生成最终的html
        new HtmlWebpackPlugin({
            filename: "index.html",//生成的html生成路径，相对于path
            inject: "body",//js插入的位置，true插入head,false插入body
            template: "index.html",//html模板路径
            hash: false,//为静态资源生成hash值
            minify:{//压缩HTML文件
                removeComments:true,//移除html中的注释
                collapseWhitespace:false//删除空白符与换行符
            }
        })
    ]
  // 开启source-map，webpack有多种source-map，在官网文档可以查到
  devtool: "eval-source-map"
}
编写主要html文件

根目录下创建index.html





    
    webpack vue

这里引入的js是由webpack打包生成的

编写vue组件

下一步在在components目录下创建app.vue
编写入口文件

在src目录下创建main.js文件

//es6语法：
import Vue from "vue";//引入vue
//外部引入别的库都可以用这样的方式，比如jquery等。。
//引入我们编写的测试用vue文件。
import app from "./components/app.vue";

Vue.config.debug = true;//开启错误提示

//创建一个vue实例，挂载在#app上
new Vue(app);

到这里一切都准备完毕，现在开始运行webpack，wabpack将文件打包到dist目录生成mian.js，等到运行完毕

现在打开builde/index.html

这里有个热加载的插件，根目录下运行 npm start 打开http://localhost:9010/build/i...同样效果

云服务器 GPU云服务器 基于webrtc的多人视频聊天服务实例 vue实例属性 基于hadoop的云存储实例 webpack的作用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80682.html

相关文章

  • Vue.js资源分享

    摘要：中文官网英文官网组织发出一个问题之后，不要暂时的离开电脑，如果没有把握先不要提问。珍惜每一次提问，感恩每一次反馈，每个人工作还是业余之外抽出的时间有限，充分准备好应有的资源之后再发问，有利于问题能够高效质量地得到解决。 Vue.js资源分享 更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/maid...

    vpants 评论0 收藏0

  • 基于vue.js和webpack的的实例项目

    摘要：周末花时间做了一个基于构建的新闻移动端项目，简单演示了，，，的使用，欢迎各种交流，建议。 周末花时间做了一个基于Vue2.3 + Webpack构建的vue新闻移动端项目，简单演示了vue-router，vue-axios，vue-lazyload，vue-awesome-swiper的使用，欢迎各种交流，建议。项目地址：https://github.com/daoket/vue......

    CollinPeng 评论0 收藏0

  • 前端开发之走进Vue.js

    摘要：作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。的新版本，的简称。的包管理工具，用于同一管理我们前端项目中需要用到的包插件工具命令等，便于开发和维护。 Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通...

    zxhaaa 评论0 收藏0

  • Vue.js 子组件的异步加载及其生命周期控制

    摘要：本文主要对组件化开发中子组件的异步加载和其生命周期进行一些探讨。异步组件讨论异步加载，需要先了解下异步组件。生命周期控制在使用子组件或者叫局部注册时，我们可能需要在子组件实例化或者叫创建完毕后做某些事情。 前端开发社区的繁荣，造就了很多优秀的基于 MVVM 设计模式的框架，而组件化开发思想也越来越深入人心。这其中不得不提到 Vue.js 这个专注于 VM 层的框架。 本文主要对 Vue...

    lidashuang 评论0 收藏0

  • vue开发看这篇文章就够了

    摘要：注意此处获取的数据是更新后的数据，但是获取页面中的元素是更新之前的钩子函数说明组件已经更新，所以你现在可以执行依赖于的操作。钩子函数说明实例销毁 Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的区别？ Library 库，本质上是一...

    fsmStudy 评论0 收藏0

发表评论

登陆后可评论

0条评论

wums

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<