剑客
关注科技互联网

基于webpack的vue实例

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

目录结构

基于webpack的vue实例

加载依赖

  • 在这之前确保安装了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对象,用于处理目录的对象,提高开发效率。
// 模块导入
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')
    }
  },
  // 开启source-map,webpack有多种source-map,在官网文档可以查到
  devtool: 'eval-source-map'
}

编写vue组件

下一步在在components目录下创建app.vue

<template>
    <div>
        <p>{{message}}</p>
        <input v-model="message">
    </div>
</template>
<script>
    //es6
    export default {
        el:"#app",
        //data:function(){},    下面是es6写法
        data () {
            return {
                message:"Hello vue!"
            }
        }
    }
</script>
<style lang="sass">
    /*测试一下对sass的编译*/
    $qwe:#94FF97;
    body {
        background-color: $qwe;
        h1 {
            background-color: #eee;
            color: red;
            transform: translate(10%, 10%);
        }
        h1:hover {
            height:100px;
        }
        h2 {
            background-color: #999;
        }
    }
</style>

编写入口文件

在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,等到运行完毕

基于webpack的vue实例

现在打开index.html

基于webpack的vue实例

这里有个热加载的插件,根目录下运行 npm start 打开 http://localhost:9010/ 预料也会出现。但是我这里不知道是不是服务器配置的问题,望大神指出。

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址