Vue & webpack
2017-08-07 本文已影响0人
眼星
前提
- 安装 "node" "npm" "git"
- 全局安装"webpack"
npm install webpack -g
创建项目
- 在 GitHub（或oschina）上新建项目;
- 使用
git clone 项目地址命令，克隆指定项目到本地；
项目结构搭建
TheProject
- /dist
- /src
- /statics
- template.html
- webpack.config.js
- .gitignore
- README.md
初始化项目
-
npm init -y初始化项目配置，生成 "package.json" 文件，-y表示所有选项为默认值
配置依赖的扩展包
在项目根目录安装以下扩展包
vue
vue-router
vue-resource
以上扩展包在生产模式安装，添加后缀
--save（自动保存至 "package.json" 中的 "dependencies"）
// 处理css,less样式文件
style-loader
css-loader
less
less-loader
// 处理img,ttf等资源文件
file-loader
url-loader
// 处理ES6语法
babel-core
babel-loader
babel-preset-es2015
babel-plugin-transform-runtime
// 处理vue组件文件
vue-loader
vue-template-compiler
// 自动编译运行插件
webpack
webpack-dev-server
html-webpack-plugin
以上扩展包在开发模式安装
--save-dev（自动保存至 "package.json" 中的 "devDependencies"）
配置webpack.config.js 和.gitignore
// "webpack.config.js" 文件 (设置webpack按照怎样的规则处理项目)
var htmlwp = require('html-webpack-plugin'); // 导入插件
module.exports = {
entry: './src/main.js', // 指定spa入口文件
output: {
path: __dirname + '/dist', // 打包后文件输出到该文件夹
filename: 'build.js' // 打包后的文件的名字
},
module: {
loaders: [{
test: /\.css$/, // 装填.css文件
loader: 'style-loader!css-loader'
},
{
test: /\.less$/, // 装填.less文件
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.(png|jpg|gif|ttf|svg)$/, // 装填url请求的资源文件
loader: 'url-loader?limit=20000' // limit表示图片的大小为20K是临界值，
// 小于20K的图片都将被打包到build.js中去
},
{
test: /\.js$/, // 装填.js文件
loader: 'babel-loader',
exclude: /node_modules/ // 排除node_modules文件夹
},
{
test: /\.vue$/, // 解析.vue 组件页面文件
loader: 'vue-loader' //
}
]
},
babel: { // 配置将es6语法转换成es5语法
presets: ['es2015'],
plugins: ['transform-runtime']
},
plugins: [
new htmlwp({
title: '首页', // 生成的页面标题
filename: 'index.html', // 在内存中生成的页面名称
template: 'template.html' // 以template.html页面为模板生成
}) // 实例化htmlwp,并配置参数
]
}
// ".gitignore" 文件 (设置git命令忽略的文件及文件夹)
.git
/node_modules
启动开发之旅 - 简单页面
配置 "template.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
新建 "Vue.app" 和 "main.js"
在 "/src" 中新建全局组件 "Vue.app"
<template>
<div class="root">
<h1>这是一个全局组件</h1>
</div>
</template>
<script>
// 这里表示导出这个全局组件
export default {
}
</script>
<style scoped>
h1{
color: #0094ff;
}
</style>
在 "/src" 中新建入口文件 "main.js"
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: "#app",
render:c=>c(App) // 将全局组件App.vue渲染到Vue实例中
// 而该Vue实例又将接管内存中依据 "template.html" 模板生成的 "index.html" 文件中的 "id" 为 "app" 的元素
})
开发之旅 - Mint UI
...
开发之旅 - vue-router
...
开发之旅 - vue-resource
...
开发之旅 - 过滤器（Moment）
...
开发之旅 - Vuex
...
