未加星标

基于webpack的vue实例

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 服务器
分页:12
转载请注明
本文标题:基于webpack的vue实例
本站链接:http://www.codesec.net/view/484557.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(37)