基于webpack的vue实例

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

这是我个人在学习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/ 预料也会出现。但是我这里不知道是不是服务器配置的问题,望大神指出。

未登录用户
全部评论0
到底啦