【构建】手把手构建一个VUE项目

头像
stefanieliang
    阅读 7 分钟
    5

    一、项目准备

    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 构建版本。这里列出了它们之间的差别：vuejs构建版本

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

    编译器：用来将模板字符串编译成为 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"
  },
    构建工具webpack3vue.js
    stefanieliang
    190 声望19 粉丝

    一天一笔记~

    « 上一篇
    【知识梳理】4.5MVVM框架类
    下一篇 »
    【构建】配置ESLint

    引用和评论

    推荐阅读
    头像
    前段实现gzip与json之间的转换

    stefanieliang阅读 942

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3k

    头像
    Vue 项目推荐使用这个图标库 vue-icons-plus

    破晓L赞 4阅读 1.7k评论 3

    头像
    从零开始搭建 Vue3 组件库开发环境

    zxl20070701赞 2阅读 606

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 257评论 1

    头像
    electron开发采坑小记

    aqiongbei赞 3阅读 7.8k评论 2

    0 条评论
    得票最新