标签：exclude href 安装 bash component www htm meta 开发
https://github.com/haoyongliang/webpack-babel-Vue
简单的目录结构:|-index.html|-main.js 入口文件|-App.vue vue文件，官方推荐命名法|-package.json 工程文件(项目依赖、名称、配置)npm init --yes 生成|-webpack.config.js webpack配置文件
module.exports = {entry:‘./main.js‘,//指定入口文件output : {path:__dirname,filename:‘boundle.js‘//输出文件}}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><app></app><script src="boundle.js"></script></body></html>
cnpm install webpack --save-dev //不带服务器版本cnpm install webpack-dev-server --save-dev //带服务器版本
注意 两个都要安装
在package.json中配置开发命令
"scripts":{"dev" : "webpack-dev-server --inline --hot --port 8082"}
–inline:文件修改后则重启
–hot 模块热载
–port指定端口
cnpm install vue-loader@8.5.4 --save-devcnpm install vue-html-loader --save-devcnpm install css-loader --save-devcnpm install vue-style-loader --save-devcnpm install vue-hot-reload-api@1.3.2 --save-dev
vue-hot-reload-api 每次改完后验证代码有没有错误功能
在webpack.config.js中添加
module:{loaders:[{test:/\.vue$/,loader:‘vue‘},//将.vue文件通过vue-loader变成正常代码{test:/\.js$/,loader:"babel",exclude:/node_modules/},//将除了node_modules文件夹下的.js文件通过babel转换成兼容代码]}
安装babel相关程序
cnpm install babel-loader --save-devcnpm install babel-core --save-devcnpm install babel-plugin-transform-runtime --save-devcnpm install babel-preset-es2015 --save-devcnpm install babel-runtime --save-dev
在webpack.config.js中添加
//配置ES6编译环境babel:{presets:[‘es2015‘],plugins:[‘transform-runtime‘]//每次改完代码时时编译插件}
cnpm install vue@1.0.28 --save
<template><h1>welcome Vue</h1></template><script></script><style>body{background: #abc}</style>
import Vue from ‘vue‘;import App from ‘./App.vue‘;new Vue({el:"body",components:{app:App}});
.gitignore
.editorconfig
标签：exclude href 安装 bash component www htm meta 开发
原文地址：http://www.cnblogs.com/haoyongliang/p/55871e7d94faef404d45653c28457452.html
