前端工程化基础-vue

Posted liuzhixiang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端工程化基础-vue相关的知识,希望对你有一定的参考价值。

由浅入深支持更多功能

 

1.安装最新版本的node.js和NPM,并了解NPM基本用法。

2.创建一个目录demo。使用npm 初始化配置: npm init  ,执行后会有一系列选项,可按回车快速确认,在demo中生成一个package.json文件。

3.局部安装webpack  :  npm install webpack --save-dev

--save-dev 会作为开发依赖来安装webpack。安装成功后,在package.json中会多一项配置

"devDependencies": {
  "webpack": "4.6.0"  
}

4.接着需要安装webpack-dev-server,它可以在开发环境中提供很多服务,比如启动一个服务器,热更新,接口代理等

局部安装: npm install webpack-dev-server --save-dev

5.在demo下创建一个js文件:webpack.config.js初始化内容:

var config = {
    
};

module.exports = config;

6.在package.json的script里增加一个快速启动webpack-dev-server服务的脚本:

{
  //...
    "scripts":{
          "test":*****,
          "dev":"webpack-dev-server --open --config webpack.config.js"        
      }    
    
}

当运行npm run dev就会执行webpack-dev-server --open --config webpack.config.js命令。其中--config是指向webpack-dev-server 读取的配置文件路径,这里直接读取我们在上一步创建的webpack.config.js文件。--open会在执行命令是打开浏览器页面,默认地址是127.0.0.1:8080,不过ip和端口都可以配置。

"dev":"webpack-dev-server --host 172.172,172.1 --port 8888 --open --config webpack.config.js"

一般用默认的本机地址就可以。

7.在demo目录下新建一个空的main.js作为入口的文件,然后在webpack.config.js中进行入口的输出和配置:

var path = require(‘path‘);
var config = {
    entry: {
        main: ‘./main‘
    },
    output: {
        path: path.join(__dirname, ‘/dist‘),
        publicPath: ‘./dist‘,
        filename: ‘main.js‘
    }
};

module.exports = config;

entry中的main就是我们配置的单入口,webpack会从main.js文件开始工作。output中path选项用来存放打包后文件的输出目录,必填项。publicPath是资源文件引用目录,如果在cdn上,这里可以填写cdn地址。filename用于指定输出文件的名称。因此,这里配置的output意为打包后的文件会存放在demo/dist/main.js,只在html引入就可以了。

<body>
    <div id="app">Hello world</div>
<script src="/dist/main.js"></script>
</body>

8.运行 npm run dev就能看到hello world字样。

 

9.逐步完善配置文件

在webpack的世界中,每个文件都是一个模块,比如.css、.js、.html、.jpg、.less等。对于不同的模块需要用不同的加载器来处理,而加载器就是webpack最重要的功能。

安装style-loader和css-loader来处理css样式。

通过npm 来安装:

npm install css-loader --save-dev

npm install style-loader --save-dev

安装完成后再webpack.config.js文件里面配置Loader,增加对.css文件的处理。

var config = {
    //.....
    module:{
        rules:[
            {
                test:/\\.css$/,
                use:[
                    ‘style-loader‘,
                    ‘css-loader‘
                ]
            }
        ]
    }
};

module对象 的rules属性中可以指定一系列的loader,每一个loader都必须包含test和use两个选项。这段的意思是说,当webpack编译过程中遇到require()或import语句导入一个后缀名为.css的文件时,先将它通过css-loader转换,再通过style-loader转换,然后继续打包。use选项的值可以是数组或字符串,如果是数组,它的编译顺序就是从后往前。

在demo下新建一个style.css文件,并在main.js中导入:

/**style.css**/

#app{
  font-size:24px;

  color:#f50;
}

//main.js

import ‘./style.css‘

重新执行npm run dev可以看到页面文字变成了红色,字号变大。

下面是执行后的html源码:

技术分享图片

可以看到,css是通过javascript动态创建style标签来写入的,这意味着样式代码都已经编译在了mian.js文件里,但是在实际业务中可能并不希望这样做,因为项目大了样式会很多,都放在js里太占体积。这时 就要用到webbpack的插件。

webpack的插件功能很强大而且可以定制。这里我们使用一个extract-text-webpack-plugin的插件来把散落在各地的css提取出来,并生成一个main.css的文件,并最终在index.html里通过link的形式加载它。

 10.通过npm 安装extract-text-webpack-plugin插件:

npm install extract-text-webpack-plugin --save-dev

然后在配置文件中导入插件,并改写loader配置:

 

var path = require(‘path‘);
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);
var config = {
    //.....
    module:{
        rules:[
            {
                test:/\\.css$/,
                use:ExtractTextPlugin.extract({
                    use: ‘css-loader‘,
                    fallback: ‘style.loader‘
                })
            }
        ]
    },
    plugin: [
        //重命名提取后的css文件
        new ExtractTextPlugin("main.css")
    ]
};

module.exports = config;

这个时候运行可能会出现“DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead”类似的报错,这个是webpack版本问题

使用 sudo npm install [email protected]  安装4.0就可解决这个问题。

 

11.单文件组件和vue-loader

在使用webpack构建Vue项目时,可以使用一种新的构建模式:.vue单文件组件。在webpack中使用vue-loader就可以对.vue格式的文件进行处理。

一个.vue文件一般包含3部分,<template>、<script>、<style>

style标签使用scoped属性,表示当前的css只在这个组件有效,如果不加,那么样式会应用到整个项目。style还可以结合css预编译一起使用。比如less处理就可以写成<style lang="less">。使用.vue文件需要安装 vue-loader,vue-style-loader等加载器并做配置。因为要使用es6语法,还需安装babel和babel-loader等加载器。使用npm 逐个安装以下依赖:

npm install --save vue

npm install --save-dev vue-loader

npm install --save-dev vue-style-loader

npm install --save-dev vue-template-compiler

npm install --save-dev vue-hot-reload-api

npm install --save-dev babel

npm install --save-dev babel-loader

npm install --save-dev babel-core

npm install --save-dev babel-plugin-transform-runtime

npm install --save-dev babel-preset-es2015

npm install --save-dev babel-runtime

12.安装完成后,在webpack.config.js配置以支持.vue文件和es6的解析。

var path = require(‘path‘);
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);
var config = {
    entry: {
        main:‘./main‘
    },
    output: {
        path: path.join(__dirname, ‘/dist‘),
        publicPath: ‘/dist‘,
        filename: ‘main.js‘
    },
    module: {
        rules: [
            {
                test: /\\.vue$/,
                loader: ‘vue-loader‘,
                options: {
                    loaders :{
                        css: ExtractTextPlugin.extract({
                            use: ‘css-loader‘,
                            fallback: ‘vue-style-loader‘
                        })
                    }
                }
            },
            {
                test: /\\.js$/,
                loader: ‘babel-loader‘,
                exclude: /node_modules/
            },
            {
                test: /\\.css$/,
                use: ExtractTextPlugin.extract({
                    use: ‘css-loader‘,
                    fallback: ‘style-loader‘
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("main.css")
    ]
};

module.exports = config;

vue-loader在编译.vue文件时,会对<template>、<script>、<style>分别处理,所以在vue-loader选项里多了一项options来进一步对不同语言进行配置。比如在对css进行处理时,会先通过css-loader解析,然后把处理结果再交给vue-style-loader处理。当技术栈多样化时,可以给<template>、<script>、<style>都指定不同的语言,比如<template lang="jade">和<style lang="less">,然后配置loader就可以了。

13.在demo目录下新建一个名为.babelrc的文件,并写入babel的配置,webpack会依赖此配置文件来使用babel编译es6代码:

{
  "presets": ["es2015"],
  "plugins": ["transform-runtime"],
  "comments": false
}

配置好这些后就可以使用.vue文件了,每个.vue文件就代表一个组件,组件之间可以相互依赖。

14.在demo目录下新建一个app.vue的文件并写入以下内容:

<template>
    <div>Hello {{name}}</div>
</template>

<script>
    export default {
        data() {
            return {
                name: "vue.js"
            }
        }
    }
</script>

<style scoped>
    div{
        color: #f60;
        font-size: 24px;
    }
</style>

.vue的组件时没有名称的,在父组件使用时可以对它自定义。写好了组件,就可以在入口main.js中是用它了。打开main.js,把内容替换下面代码:

import Vue from ‘vue‘;
//导入app.vue组件
import App from ‘./app.vue‘;

//创建Vue实例
new Vue({
    el: "#app",
    render: h => h(App)
});

 

render:h => h(App)是es6的写法,等同于

render:function(h){

  return h(App)

}

执行npm run dev,这样第一个vue工程项目就跑起来了。

bug:这个地方vue-loader升级到15版本以上不兼容。需要退回14版本才兼容。

技术分享图片

这里之所以多了一串data-v-xxx内容,是因为使用了<style scope>功能,如果去掉scope就没有了。

15.在demo 目录下新建两个文件,title.vue和button.vue 

 title.vue

<template>
    <h1>
        <a :href="‘#‘ + title">{{title}}</a>
    </h1>
</template>

<script>
    export default {
        props:{
            title:{
                type:String
            }
        }
    }
</script>

<style scoped>
    h1 a{
        color: #3399ff;
        font-size: 24px;
    }
</style>

button.vue

 

<template>
    <button @click="handleClick" :style="styles">
        <slot></slot>
    </button>
</template>

<script>
    export default {
        props: {
            color: {
                type: String,
                default: ‘#00cc66‘
            }
        },
        computed:{
            styles () {
                return {
                    background: this.color
                }
            }
        },
        methods:{
            handleClick:function(e){
                this.$emit(‘click‘,e);
            }
        }
    }
</script>

<style scoped>
    button{
        border: 0;
        outline: none;
        color: #fff;
        padding: 4px 8px;
    }
    button:active{
        position: relative;
        top: 1px;
        left: 1px;
    }

</style>

然后改写根实例app.vue组件,把title.vue和button.vue导入:

<template>
    <div>
        <v-title title="Vue组件化"></v-title>
        <v-button @click="handleClick">点击按钮</v-button>
    </div>
</template>

<script>
    //导入组件
    import vTitle from ‘./title.vue‘;
    import vButton from ‘./button.vue‘;

    export default {
        components: {
            vTitle,
            vButton
        },
        methods:{
            handleClick:function(e){
                console.log(e)
            }
        }

    }
</script>

<style scoped>
    div {
        color: #f60;
        font-size: 24px;
    }
</style>

其中components: {

  vTitle,

  vButton

}

写法是es6写法,等同于:

components: {

  vTitle : vTitle,

  vButton : vButton

}  

导入的组件都是局部注册的,而且可以自定义名称,其他用法和组件用法一致。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



以上是关于前端工程化基础-vue的主要内容,如果未能解决你的问题,请参考以下文章

前端工程化基础-vue

前端学完vue学啥

入门到精通❤️「Java工程师全栈知识路线」

day02-项目实现01

前端工程化Vue-cli

前端单元测试框架-Mocha