【构建】手把手构建一个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 构建版本。这里列出了它们之间的差别:《【构建】手把手构建一个VUE项目》

完整版:同时包含编译器和运行时的版本。

编译器:用来将模板字符串编译成为 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-loadervue-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"
  },
    原文作者:stefanieliang
    原文地址: https://segmentfault.com/a/1190000014409110
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞