从零搭建vue

[smallwebbird]

从零搭建vue

package.json配置

  "name": "vueapplication",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/webpack.dev.config.js",
    "start": "webpack-dev-server --config ./build/webpack.dev.config.js --color     --progress --hot"   
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.0",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.3",
    "style-loader": "^0.23.1",
    "transform-runtime": "0.0.0",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.1.1",
    "vue": "^2.5.17",
    "vue-file-upload": "^0.1.12",
    "vue-loader": "^15.4.2",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  }
}

首先我把我的配置写出来，因为我在这个配置的过程中遇到很多版本的问题，所以我先把自己的配置写出来，首先安装webpack
npm i webpack-cli --save-dev
npm i webpack --save-dev

初始化项目

首先创建文件夹名字叫做vueApplication,然后使用npm init 进行初始化，然后在vueApplication中生成了一个package.json

创建src文件夹

首先在vueApplication文件夹创建src文件夹，然后在该文件夹下创建App.vue文件
App.vue

    <template>
    <div id="app">
        从零开始Vue
     </div>
    </template>
    <script>
        export default {
            name: 'App'
        }
    </script>

然后创建一个main.js的文件，将App.vuemount到html文件上

main.js

import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

main.js文件需要vue模块， npm i vue --save-dev

创建build文件夹

我们创建build文件夹，然后在该文件夹中创建webpack.dev.config.js
webpack.dev.config.js

var path = require('path');
var webpack = require('webpack');


module.exports = {
    mode:'development',
    entry:path.join(__dirname,'../src/main.js'),
    output:{
        path:path.join(__dirname,'../dist'),
        filename:'bundle.js',
    },
    resolve:{
        extensions:['.js','.vue'],
    },
    module:{
        rules:[
            {
                test:/\.vue$/,
                use:'vue-loader'
            },
            {
                test:/\.js$/,
                use:'babel-loader',
                include:[
                    path.join(__dirname, '../src/')
                ]
            }
        ]
    },   
}

npm i vue-loader --save-dev
npm i babel-loader --save-dev
npm i vue-template-compiler --save-dev
webpack主要的用处就是打包一个js文件供浏览器使用，所以webpack只能打包js文件，所以我们需要将非js文件转为js，所以我们就需要webpack中的module选项来配置，具体配置请查看webpack官网

entry： 打包的入口文件
output: 输入的文件， filename字段是打包的文件名字
resolve： 其中的extensions字段说明了，我们引入文件不需要加文件后缀
例如 import A from a.vue,配置了resolve之后我们可以这样写import A from a，就不需要加那个vue的后缀
module: 这个是将各种非js文件转为js文件
include: 该字段告诉我们只处理include定义的目录下的文件
由于js文件可能包含ES6和ES7的语法所以我们使用babel来进行转换为ES5，但是从Babel6.x以上你配置了bable之后，也不能进行工作，我们需要配置.babelrc文件，在根目录vueApplication下创建.babelrc
.babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"]
}

babel5.x提供的是一个babel包，但是从babel6.x版本之后，不在提供babel包，而是提供了一些额外的包，命令行工具由babel-cli提供，node api由babel-core,polyfill由babel-polyfill提供，我也是个小白，我以前都是用vue-cli创建的vue程序，也是像上面这样写的，但是使用的是babel7.x版本，所以我们需要重新修改.babelrc
.babelrc

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "@babel/preset-stage-2"
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

npm install --save-dev @babel/preset-stage-2
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/plugin-transform-runtime
npm install --save-dev @babel/core
然后我们我们运行webpack --config ./build/webpack.dev.config.js,然后我们发现会出现以下的错误

Please consider reading our blog post on this decision athttps://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
https://github.com/babel/babel-upgrade

然后我们查看以上给出的网址，在官网查看发现@babel/preset-stage-2已经被去除了，我们可以使用babel-upgrade这个命令，npm install babel-upgrade,官网给出的解释这个工具是自动更新大多数依赖，配置文件以及js文件，这些文件需要babel包直接更新到babel7，然后运行babel-upgrade --write，这个命令会增加一些配置文件到.babelrc和package.json中，所以我们需要npm install,完成以上步骤之后，然后webpack --config ./build/webpack.dev.config.js，然后又出现错误了Oh，No，错误如下

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

查阅资料然后我们发现自从vue-loader 15.x之后，vue-loader的使用都是需要伴随VueLoaderPlugin的，我们在webpack.config.dev.js中加入

  var VueLoaderPlugin = require('vue-loader/lib/plugin');
  module.exports = {
      ...,
      plugins:[
      new VueLoaderPlugin()
      ]
  }

suprise-mother-fucker我们打包成功了
然后在打包后生成的dist文件夹中创建index.html
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vapp</title>
</head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

记住我们一定要把script放在body的最下面，这里面的src指向的是我们打包的bundle.js，记住我们的div中的id要与main.js中的el属性相同，然后用浏览器打开这个index.html,恭喜又出错了，我们打开浏览器的控制台，出现如下错误

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)

由于webpack打包时使用的是默认的运行期构造，但是vue运行期构造，是调用render()函数，但是在App.vue文件中没有render函数，所以会出现上面的错误，所以我们需要在webpack中配置为独立构造，向webpack.dev.config.js中新增

module.exports ={
    ...,
    resolve:{
        extensions:['.js','.vue','.css'],
        alias:{
            'vue$': 'vue/dist/vue.js'
        }
    },
} 

然后重新打包，在浏览器中打开index.html,会发现App.vue中的显示在浏览器中出现从零开始vue

参考文档
babel-upgrade命令的使用
vue独立构建与运行期构建
stage-x ES7的删除
webpack官网
babel官方文档
babel5升级到babel6.x总结
babel入门教程
babel polyfill与runtime的区别

创建public目录

在vueApplication根目录下创建一个public目录，然后在public目录下，创建一个css目录，css目录下主要放一些css文件，在css目录下创建style.css文件
style.css

#app{
    background: red;
}

虽然我们创建了style.css文件，但是打开index.html发现并没有效果，因为我们还没有将style.css文件并没有打包到bundle.js文件中，增加如下片段webpack.dev.config.js文件，以便能打包css文件

module.exports = {
    ...,
    module:{
        rules:[
        {
            test:'/\.css$/',
            use:['style-loader', 'css-loader']
        }
        ]
    }
}

npm i css-loader --save-dev
npm i style-loader --save-dev
经过以上我们的style.css就可以通过import来导入css文件，修改App.vue如下
App.vue

<template>
  <div id="app">
    从零开始Vue
  </div>
</template>
<script>
import '../public/css/style.css';
export default {
  name: 'App'
}
</script>

然后重新打包webpack --config ./build/webpack.dev.config.js打包，然后用浏览器打开index.html发现我们的style.css样式生效了

我们每次打包都是用webpack --config ./build/webpack.dev.config.js,这样会很麻烦的，所以增加如下题目到package.json
package.json

{
    "scripts":{
        "build":"webpack --config ./build/webpack.dev.config.js"
    }
}

增加web服务器

webpack-dev-server是一个静态的文件服务器，可以为打包后的文件提供web服务
npm i webpack-dev-server --save-dev
然后增加如下条目到webpack.config-dev.js中

module.exports = {
    ...,
    devServer:{
        port:8080,
        contentBase:path.join(__dirname,'../dist'),
        historyApiFallback:true 
    }
}

port:是监听的端口号
contentBase:服务器工作的目录
historyApiFallback:用于将index.html替代404
在package.json中添加如下条目

{
    "scripts": {
        "start":"webpack-dev-server --config ./build/webpack.dev.config.js --color --progress --hot"
     }
}  

在命令行中键入npm run start
在浏览器中输入http://localhost:8080/,然后显示index.html
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vapp</title>
</head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="bundle.js"></script></body>
</html>

每次我们都需要引入bundle.js,但是当打包名字改变的时候我们还需要，重新进行引入，有没有一种方法实现打包文件自动注入index.html文件中，有，npm i html-webpack-plugin --save-dev，我们增加如下条目到webpack.dev.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    ...,
    plugins:[
    new HtmlWebpackPlugin({
        filename:'index.html',
        template:path.join(__dirname,'../index.html')
    })
    ]
}

我们把dist目录下的index.html复制到vueApplication根目录下,删除dist目录下的index.html然后同时删除根目录下index.html中的<script>标签，然后键入npm run start,然后在浏览器中输入http://localhost:8080/发现成功显示
style.css文件打包后也被打包进bundle.js，我们把css文件单独打包出来，mini-css-extract-plugin可以帮助我们，npm i mini-css-extract-plugin --save-dev,修改webpack.config.dev.js

var MiniCssExtractPlugin = require('miniCssExtractPlugin');
module.export = {
    ...,
    module:{
        rules:[{
                test:/\.css$/,
                // use:ExtractTextPlugin.extract({
                //     fallback:'style-loader',
                //     use:'css-loader'
                // })
                use:[MiniCssExtractPlugin.loader, 'css-loader']
            }]
},
    plugins:[
    new MiniCssExtractPlugin({
            filename:'[name].[contenthash].css'
        })
    ]
}

以前我也是使用extract-text-plugin这个插件但是在新版本好像不好用，所以使用上述的插件，功能也是一样的，然后在命令行键入npm run build，发现dist文件夹下出现了main.一堆数字.css，成功的单独打包style.css文件
参考文档
webpack官网
MiniCssExtractPlugin的使用

创建components,router文件夹

我们在src文件夹下创建components目录，首先创建content.vue,fileContent.vue,fileHeader.vue,fonter.vue,header.vue,hello.vue,world.vue
content.vue

<template>
 <div class='content'>
    <picture-div
    v-for='pic in pics'
    :key='pic.id'
    :pic='pic'
    @delete='deleteImg'></picture-div>
        <router-view></router-view>
 </div>    
</template>
<script>
import Vue from 'vue';
Vue.component('picture-div',{
    props:['pic'],
    template:`
    <div>
        <img :src="pic.url"/>
        <span>{{pic.name}}</span>
        <button @click='$emit("delete",pic.id)'>删除</button>
    </div>`
})
 export default{
     name:'content',
     props:{
         obj:{
             type:Object,
             require:true
         }
     },
     data(){
         return{
             pics:[
                 {
                     name:'one',
                     url:require('../../public/pictures/a.jpg'),
                     id:0
                 },
                 {
                     name:'two',
                     url:require('../../public/pictures/b.jpg'),
                     id:1
                 }
             ],
         }
     },
     methods:{
         deleteImg:function(id){
             let deleteIndex = this.pics.findIndex(function(value, index, arr){
                 return value.id === id;
             });
             this.pics.splice(deleteIndex,1);
         }
     },
     watch:{
         obj:function(val){
             let picObj = {};
             if(val.name != ''&&val.url!=''&&val.id!=''){
                 picObj.name = val.name;
                 picObj.url = require('../../public/pictures/'+val.url);
                 alert(picObj.name)
                 this.pics.push(picObj);
             }
         }
     }
 }    
</script>

fileConent.vue

<template>
    <div class="content">
        <audio
        class="music"
        controls="controls" 
        v-for="song in songs"
        :src="song.url"
        :key='song.id'
        type='audio/mp3'></audio>
    </div>
</template>
<script>
export default {
    name:'fileContent',
    data(){
        return {
            songs:[
                {
                    url:require('../../public/musics/one.mp3'),
                    id:1
                },
                {
                    url:require('../../public/musics/two.mp3'),
                    id:2
                }
            ]
        }
    }
}
</script>

fileHeader.vue

<template>
    <div class="header">
    <div>
        <input type="text">
    </div>
    <div>
        <button>上传歌曲</button> 
    </div>
    </div>
</template>
<script>
export default {
    name:'fileHeader',
}
</script>

footer.vue

<template>
 <div class='footer'>
    <router-link to="/hello" @click.native="pictureStore">图片资源管理器</router-link>
    <router-link to="/world" @click.native="fileStore">文件资源管理器</router-link>
 </div>    
</template>
<script>
 export default{
     name:'footer',
     methods:{
         pictureStore: function(){
             this.$emit('change-picture','pictures');
         },
         fileStore: function(){
             this.$emit('change-file','files');
         }
     }
 }    
</script>

header.vue

<template>
 <div class='header'>
  <div class='name'>
    <span>请输入Name</span>
    <input type='text'  v-model="name"/>
  </div>
  <div class="url">
    <span>请输入Url</span>
    <input type="text" v-model="url" />
  </div>
  <div class="id">
     <span>请输入Id</span>
     <input type="text" v-model="id" />
  </div>
    <button @click='add'>增加</button>
 </div>    
</template>
<script>
 export default{
     name:'header',
     data(){
       return {
         name:'',
         url:'',
         id:0,
       }
     },
     methods:{
       add:function(){
         let obj = {};
         obj.name = this.name;
         obj.url = this.url;
         obj.id = this.id;
         this.$emit('addPic',obj);
       }
     }
 }    
</script>

hello.vue

<template>
  <div>
      这里是hello
  </div>  
</template>
<script>
export default {
    name:'hello'
}
</script>

world.vue

<template>
    <div>
        这里是world
    </div>
</template>
<script>
export default {
    name:'world'
}
</script>

修改App.vue
App.vue

<template>
 <div id='app' @addPic='addPic'>
  <Header @addPic='addPic' v-if="changeTo === 'pictures'"></Header>
  <fileheader v-else></fileheader>
  <Content :obj='obj' v-if="changeTo === 'pictures'"></Content>
  <filecontent v-else></filecontent>
  <Footer @change-picture='changePicture' @change-file='changeFile'></Footer>
 </div>    
</template>
<script>
import Vue from 'vue';
const Header = () => import(/* webpackChunkName:'importComponent' */ './components/header.vue');
const Content = () =>import(/* webpackChunkName:'importComponent' */ './components/content.vue');
const Footer = () =>import(/* webpackChunkName:'importComponent' */ './components/footer.vue');
const fileheader = () => import(/* webpackChunkName:'importComponent' */ './components/fileHeader.vue');
const filecontent = () => import(/* webpackChunkName:'importComponent' */ './components/fileContent.vue');
import '../public/css/style';
    export default {
        name: 'App',
        components:{Header, Content, Footer, fileheader, filecontent},
        data(){
            return {
                obj:{},
                changeTo:'pictures'
            }
        },
        methods:{
            addPic:function(obj){
                this.obj = obj;
            },
            changePicture:function(str){
                this.changeTo = str;
            },
            changeFile:function(str){
                this.changeTo = str;
            }
        }
    }
</script>

然后我们在src文件夹下创建router文件夹，在router文件夹下创建index.js用于创建路由
index.js

import Vue from 'vue';
import Router from 'vue-router';
const Hello = () => import(/* webpackChunkName:'importComponent' */'../components/hello');
const World = () => import(/* webpackChunkName:'importComponent' */'../components/world');

Vue.use(Router);

export default new Router({
    routes:[
        {
           path:'/hello',
           name:'Hello',
           component: Hello
        },
        {
            path:'/world',
            name:'World',
            component: World
        }
    ]
})

在public目录下创建pictures和musics文件夹，然后在这俩个的目录下放入图片和音乐，具体看我的code中的代码，修改style.css的代码
style.css

#app{
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: column;
}
.header{
    width:100%;
    height: 100px;
    border: 2px solid red;
    display: flex;
}
.header div{
    margin: 20px;
    flex: 1;
}
.header button:active{
    background: skyblue;
}
.name input{
    height: 20px;
    
}
.url input{
    height: 20px;
}
.id input{
    height: 20px;
}
.content{
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    border: 2px solid green;
}
.content div{
    width: 100px;
    height: 120px;
    border: 1px solid grey;
    box-sizing: border-box;
    margin: 10px;
    position: relative;
}
.content img{
    width: 100%;
    height: 70%;
}
.content button{
    border-radius: 3px;
    border: none;
    position: absolute;
    right: 5px;
    top: 77%;
    cursor: pointer;
}
.content button:hover{
    background: red;
    color: white;
}
.content span{
    position: absolute;
    left: 5px;
    top: 75%;
}
.content .music{
    width: 150px;
    height: 100px;
    border: 1px solid red;
    margin: 10px;
    border-radius: 2px;
}
.footer{
    height: 100px;
    border: 2px solid red;
}

修改main.js

import Vue from 'vue'
import App from './App'
import router from './router/index';
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

然后修改webpack.dev.config.js，能够打包图片和音乐
npm i url-loader --save-dev
npm i file-loader --save-dev

module.exports = {
    ...,
    output:{
        path:path.join(__dirname,'../dist'),
        filename:'bundle.[hash].js',
        chunkFilename:'[name].[chunkhash].js'
    }，
    module:{
        rules:[
          {
                test:/\.(jpg|gif|png)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        limit:8192
                    }
                }]
            },
            {
                test: /\.mp3(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                }
            }
        ]
    }
}

然后npm run build，发现dist目录下多了importComponent.一堆数字.js和bundle.一堆数字.js，这个我们以后再讲，先这么放着，然后我们npm run start，在浏览器中键入http://localhost:8080然后发现会出现如下的界面，在下节主要讲解这个app,这个界面我自己都不忍直视

app的功能

这个app的功能比较简单，应该说非常简单，首先我这个app分为三个部分头部，展示内容部分，尾部，都是应用css3盒子模型来实现的，我们可以通过尾部来实现切换，一个是上传图片的，一个是上传音乐的，因为都是一些假数据，没有后台，所以大家就将就看吧

按需加载

在vue中实现按需加载有vue中的异步组件，ES6的import(vue中的懒加载),webpack中的require.ensure()，这里采用的是ES6的懒加载方式，可以把引入的组件写成这种方式 const component = () => import(/* 自定义名字 */'components/header.vue'),这样就实现了按需加载，已经在创建component文件夹的章节中完成了webpack.config.dev.js的配置，现在拿出来看一下
webpack.config.dev.js

module.exports = (
     output:{
        path:path.join(__dirname,'../dist'),
        filename:'bundle.[hash].js',
        chunkFilename:'[name].[chunkhash].js'
    }
}    

我们把打包的文件的filename改为bundle.[hash].js，这样打包之后bundle之后就会跟着一堆数字，我们更改打包的入口文件，我们会发现这个hash会变化，chunkFilename字段代表着非入口文件的名字，文件名字需要在运行期根据chunk发送的请求去生成，因为按需请求是用到的时候再去请求，其中使用const component = () => import(/* 自定义名字 */'components/header.vue')其中的自定义名字，便是生成打包文件的名字，如果多个按需请求使用相同的自定义名字,那么按需加载的组件都被打包到同一个自定义组件文件中，所以我们在创建components文件夹章节打包时，dist文件夹中出现了一个importComponent.一堆数字.js的打包文件，是因为我们使用相同的自定义名字，所以多个组件被打包到同一个js文件中。
参考文档
按需加载的三种方式
vue懒加载

打包前清除dist文件

每次npm run build，都会将文件打包到dist文件夹下，然后会导致dist文件夹越来越大，有没有一种办法，每次打包前都清空dist文件夹中的内容，幸好有CleanWebpackPlugin插件帮助我们清空dist文件夹，首先安装npm i clean-webpack-plugin --save-dev,然后增加如下条目到webpack.dev.config.js文件中
webpack.dev.config.js

var CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    ...,
    plugins:[
    new CleanWebpackPlugin(['dist'],{
        root:path.join(__dirname, '../')
    })
    ]
}

大家要注意，有时候会发现配置CleanWebpackPlugin插件，但是不起作用，可能是因为目录设置的问题。就像本项目的webpack.config.dev.js文件放在build文件夹中，如果直接写['dist']那么会发现并没有清空dist目录，是因为在build目录下并没有dist文件夹，所以我们需要给定根目录

共用文件的抽离

现在来查看bundle.js,发现bundle.js中混杂了一些公共的代码，比如说node_module中的一些文件被打包进bundle.js文件中，现在这些文件抽离出来，作为共用代码，以前版本都是使用CommonsChunkPlugin这个插件，来实现共用文件抽离，但是webpack4.x以上这个插件已经被去除了，现在使用optimization.splitChunks插件来实现共用文件的抽离，增加如下代码到webpack.dev.config.js中

module.exports = {
    ...,
     optimization:{
            splitChunks: {
                cacheGroups: {
                    commons: {
                        test: /[\\/]node_modules[\\/]/,
                        name: "vendors",
                        chunks: "all"
                    }
                }
            }
        }
}

然后npm run build发现dist文件夹多出一个vender.一堆数字.js文件，然后可以发现bundle.js文件缩减了很多，是因为一些共用代码已经被抽离出去
参考文档
共用代码抽离
webpack官网

打包压缩

使用UglifyjsWebpackPlugin插件能够实现压缩，增加下面代码到webpack.dev.config.js中

var UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    plugins:[
    new UglifyjsWebpackPlugin()
]
}

这样就实现压缩，npm run build发现我们的文件变小了

有错误请大家指出，希望能够对大家有帮助