手动搭建webpack + vue + loader

vue-loader

说明:webpack模块加载起,一切东西都是模块;vueloader基于webpack

.vue文件结构：

<template>
</template>

<script>
</script>

<style>
</style>

简单的目录结构

index.html

main.js 入口文件

App.vue vue文件

package.json 工程文件（项目依赖，名称,配置）

npm init –yes生成

webpack.config.js webpack配置文件

webpack.config.js配置

module.exports={
//入口文件
entry:'./main.js',
//出口文件
output:{
//当前路径
path:__dirname,
filename:'build.js'
}
};

ES6模块化开发

导入模块

export default {}

引入模块

import 模块名 form 地址

webpack准备工作

cnpm install webpack –save-dev

cnpm install webpack-dev-server –save-dev

App.vue

变成正常代码 －> vue-loader@8.5.4

cnmp install vueloader@8.5.4

配置启动文件webpack.config.js

module.exports={
//入口文件
entry:'./main.js',
//出口文件
output:{
path:__dirname,
filename:'build.js'
},
module:{
loaders:[
{test:/\.vue$/, loader:'vue'},
{test:/\.js$/, loader:'babel', exclude:/node_modules/}
]
},
babel:{
presets:['es2015'],
plugins:['transform-runtime']
}
};

package.json 工程文件

{
"name": "vue-loader-demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --inline --hot",
"build":"webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.16.0",
"babel-runtime": "^6.11.6",
"css-loader": "^0.25.0",
"vue-hot-reload-api": "^1.3.2",
"vue-html-loader": "^1.2.3",
"vue-loader": "^8.5.4",
"vue-style-loader": "^1.0.0",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"vue": "^1.0.28",
"vue-router": "^0.7.13"
}
}

cnpm配置

npm install -g cnpm –registry=https://registry.npm.taobao.org

启动

npm run dev

vue-loader

cnpm install vue-html-loader css-loader vue-style-loader vue-hot-reload-api@1.3.2 –save-dev*



bable-loader

bable-core

bable-plugin transform-runtime

babel-preset-es2015

babel-runtime

cnpm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime –save-dev

install vue

cnpm install vue@1.0.28 –save

路由配合vue-loader使用

1.下载vue-router模块

cnmp install vue-router@0.7.13

2.import VueRouter from ‘vue-router’

3.Vue.use(VueRouter)

4.配置路由

const router = new VueRouter();

router.map({
'home':{
component:Home
},
'news':{
component:News
}
});

5.开启路由

router.start(App.”#app”)

6.上线

npm run build->webpack -p

vue脚手架

vue-cli—————-脚手架

帮你提供好基本的项目结构

本身集成很多的项目模版

simple

webpack

webpack-simple

基本的使用流程

安装vue命令环境

4000
nmp install vue-cli -g

验证是否安装

vue –version

生成项目模版

vue init simple vue-simple-demo(没有)

vue init webpack#1.0 vue-webpack-demo(大型项目使用,检测代码,单元测试)

vue init webpack-simple（推荐）

进入到生成目录里面

npm install

运行项目

npm run dev

修改端口号在config/index.js