【构建】手把手构建一个VUE项目
一、项目准备
1.创建目录
创建webpackTest文件夹
2.初始化
创建package.json文件
npm init
3.创建业务目录
webpackTest/app
├── css/
│ ├── reset.scss
├── js/
│ ├── home/
│ │ ├── index.vue
│ ├── router/
│ │ ├── index.js
│ ├── App.vue
│ ├── main.js
│ ├── test.vue
└── views/
└── index.html二、创建配置文件
1.创建webpack.config.js文件
2.文件配置
基础配置：
entry（入口，webpack要构建的文件）
module（配置各种loader）
plugins（插件）
output（输出）进阶配置：
resolve（webpack怎么查询文件）
devtool（eg:sourceMap如何用）
devServer（开启服务）
//基础配置webpack.config.js
const path = require('path');
module.exports = {
entry:{
app:'./app/js/main.js'
},
module:{
loaders:[{
test: /\.html$/,
loader: 'html-loader'
},{
test:/\.vue$/,
loader:'vue-loader'
},{
test:/\.scss$/,
loader:'style-loader!css-loader!sass-loader'//webpack支持对一个文件多个loader的串行解析，解析顺序为从右到左
}]
},
plugins:[],
output:{
filename:'[name].min.js',
path:path.resolve(__dirname,'dist')//node提供的path对象,resolve表示相对路径，__dirname表示当前路径
}
}3.安装webpack
npm install webpack -D
4.安装webpack-dev-server
webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。html-webpack-plugin该插件将为你生成一个HTML5文件。clean-webpack-plugin该插件自动清除 dev-server 生成的文件，防止开发过程中的缓存。
参考资料：webpack中文文档
//安装webpack-dev-server npm install --save-dev webpack-dev-server npm install html-webpack-plugin -D npm install clean-webpack-plugin -D
//开启http服务,webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
devServer: {
contentBase: path.join(__dirname, "dist"),//静态文件的输出路径
compress: true,//整个服务开启gzip压缩
port: 9000//端口号
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template:'./app/views/index.html'
})
]
};5.安装loader
npm install html-loader -D//-D表示开发依赖 npm install node-sass -D//sass-loader的依赖 npm install style-loader css-loader sass-loader -D npm install vue-loader -D
三、初始化文件
1.初始化app/css/reset.scss文件
//模拟一个reset文件
h1{
color: #f00;
.title{
color: yellow;
}
}2.初始化app/js/home/index.vue文件
<template lang="html">
<div class="home">
<h1>home</h1>
</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
.home{
color: red;
font-size: 80px;
}
</style>3.初始化app/js/router/index.js
需要引用vue官方router
//1.引入vue,vue-router
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../home/index.vue';
//2.通过 Vue.use() 明确地安装路由功能
Vue.use(Router);
//3.
export default new Router({
routes:[{
path:'/',
name:'home',
component:Home
}]
})4.安装vue、vue-router
npm install vue npm install vue-router
5.初始化app/App.vue，整个app入口
<template lang="html">
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'app'
}
</script>
<style lang="css">
</style>6.初始化app/main.js,入口js
import Vue from 'vue';
import App from './App.vue'
import router from './router/index.js'
//声明当前不是生产环境
Vue.config.productionTip = false;
//实例化vue
new Vue({
el:"#app",
router,
components:{
App
},
template:"<App></App>"
})7.初始化app/views/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义</title>
</head>
<body>
<div id="app"></div>
</body>
</html>四、Vue.js 构建版本
在 NPM 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别：
完整版：同时包含编译器和运行时的版本。
编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
//配置完整版vue.js
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
}
}
}五、px2rem自适应方案
利用px2rem-loader将css、scss文件中的px转为rem，从而实现自适应。
1.安装
npm install px2rem-loader //依赖 npm install vue-style-loader
2.配置
//webpack.config.js
module.exports = {
//...
module:{
loaders:[{
test:/\.vue$/,
loader:'vue-loader',
options: {
loaders: {
css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8',
scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader' // <style lang="scss">
}
}
}
}
}参考资料：px2rem-loader、vue-loader预处理器
六、CSS Modules
CSS Modules是一个用于模块化和组合 CSS 的流行系统。
1.配置
//webpack.config.js
module.exports = {
//...
module:{
loaders:[{
test:/\.vue$/,
loader:'vue-loader',
options: {
cssModules: {
localIdentName: '[path][name]---[local]---[hash:base64:5]',
camelCase: true
}
}
}
}
}2.使用
在你的 <style> 上添加 module 属性：<style module>...</style>，这将为 css-loader 打开 CSS Modules 模式，生成的 CSS 对象将为组件注入一个名叫 $style 的计算属性，你可以在你的模块中使用动态 class 绑定：
<template>
<p :class="$style.red">
This should be red
</p>
</template>参考资料：CSS Modules
七、提取CSS
将自动提取 *.vue 文件内的 <style> 到单个文件；提取出来的文件在<head>中使用<link>方式引入。
1.安装
npm install extract-text-webpack-plugin --save-dev
2.配置
// webpack.config.js
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
//...
module:{
loaders:[{
test:/\.vue$/,
loader:'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader!px2rem-loader?remUnit=75&remPrecision=8',
fallback: 'vue-style-loader'
}),
scss: ExtractTextPlugin.extract({
use: 'css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader',
fallback: 'vue-style-loader' // <- 这是vue-loader的依赖，所以如果使用npm3，则不需要显式安装
})
}
}
}
},
plugins: [
new ExtractTextPlugin("style.css")
]
}参考资料：提取css文件
如果觉得内容对您有帮助，请点点赞哦~~~一起学习，一起成长(#^.^#)
八、配置开发环境、生产环境
通过webpack的DefinePlugin传递参数的不同，来区别配置开发环境和生产环境。
1.配置
//webpack.config.js
const webpack = require('webpack');
module.exports = env =>{
if(!env){
env = {}//没参数时，赋值，避免undefined.
}
let plugins = [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template:'./app/views/index.html'
}),
];
if(env.production){
plugins.push(
//给webpack修改node的全局变量
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:'production'
}
}),
new ExtractTextPlugin("style.css"),
);
}
return {
//...
module:{
loaders:[{
test:/\.vue$/,
loader:'vue-loader',
options: {
loaders: env.production?{
css: ExtractTextPlugin.extract({
use: 'css-loader!px2rem-loader?remUnit=75&remPrecision=8',
fallback: 'vue-style-loader'
}),
scss: ExtractTextPlugin.extract({
use: 'css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader',
fallback: 'vue-style-loader' // <- 这是vue-loader的依赖，所以如果使用npm3，则不需要显式安装
})
}:{
css:'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8',
scss:'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader'
}
}
}
},
plugins,
}
}九、配置npm scripts
- npm test
- npm run watch
- npm start
- npm run build
//package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"build": "webpack --env.production"
}, 相关推荐
gloria0 2020-10-26
gloria0 2020-08-09
hline 2020-07-29
不知道该写啥QAQ 2020-07-18
yqoxygen 2020-06-02
不知道该写啥QAQ 2020-11-12
webfullStack 2020-11-09
Yvettre 2020-09-15
想做大牛的蜗牛 2020-10-30
gaojie0 2020-09-11
SelinaChan 2020-08-14
不知道该写啥QAQ 2020-08-09
不知道该写啥QAQ 2020-08-02
SelinaChan 2020-07-28
wangdianyong 2020-07-23
webpackvuees 2020-07-23
yqoxygen 2020-07-20
waterv 2020-07-18