前端工程化基础-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

}

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

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Andale Mono"; color: #00f900; background-color: rgba(0, 0, 0, 0.9) }
span.s1 { }

原文地址:https://www.cnblogs.com/liuzhixiang/p/8988076.html

时间: 2024-10-10 08:57:01

前端工程化基础-vue的相关文章

58到家周俊鹏:webpack PK fis,实现前端工程化我更喜欢前者

责编:陈秋歌,关注前端开发领域,寻求报道或者投稿请发邮件chenqg#csdn.net. 欢迎加入"CSDN前端开发者"微信群,参与热点.难点技术交流.请加群主微信「Rachel_qg」,申请入群,务必注明「公司+职位」.另可申请加入CSDN前端开发QQ群:465281214. 2016年,SDCC(中国软件开发者大会)相继走进了上海.深圳.成都.杭州各地.11月18日-20日将在北京完美收官.作为大会的重要分专题,前端开发专题已邀请到58到家高级前端工程师周俊鹏担任大会讲师,现场将分

前端工程化系列[06]-Yeoman脚手架核心机制

在前端工程化系列[05] Yeoman脚手架使用入门这边文章中,对Yeoman的使用做了简单的入门介绍,这篇文章我们将接着探讨Yeoman这个脚手架工具内部的核心机制,主要包括以下内容 ? Yeoman脚手架工具的价值讨论? generator[生成器]的内部结构? generator[生成器]的项目模板? Yeoman脚手架工具的核心运转机制? Yeoman 的主要组装流程 Yeoman这样的脚手架工具解决了什么问题? 所有新事物都不是凭空产生的,它们的出现总有某些内在的驱动力.一项新技术,一

浅析前端工程化

1. 什么是前端工程化 自有前端工程师这个称谓以来,前端的发展可谓是日新月异.相比较已经非常成熟的其他领域,前端虽是后起之秀,但其野蛮生长是其他领域不能比的.虽然前端技术飞快发展,但是前端整体的工程生态并没有同步跟进.目前绝大多数的前端团队仍然使用非常原始的"切图(FE)->套模板(RD)"的开发模式,这种模式下的前端开发虽说不是刀耕火种的原始状态,但是效率非常低下. 前端的工程化问题与传统的软件工程虽然有所不同,但是面临的问题是一样的.我们首先回顾一下传统的软件开发流程模型:

前端工程化(摘抄)

目前来说,Web业务日益复杂化和多元化,前端开发已经由以WebPage模式为主转变为以WebApp模式为主了.现在随便找个前端项目,都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了.工程复杂了就会产生许多问题,比如:如何进行高效的多人协作?如何保证项目的可维护性?如何提高项目的开发质量?... 前端工程化是前端架构中重要的一环,就是为了解决上述各种效率方面的问题的.而前端工程本质上是软件工程的一种,因此我们应该从软件工程的角度来研究前端工程. 那么前端工程化需要考虑哪些因素?我认为前

到底是什么是前端工程化、模块化、组件化

引言 提到前端往往很多人的映像就是入门简单,HTML.CSS加一起一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各种特效代码随意用,一个新手前端也能在很短的时间里写出炫酷的页面效果,然而入门简单并不意味着前端这碗饭很好吃,做惯了切图.布局.扣特效的前端新同学在向前发展的路上越来越觉得吃力,而没有任何编程思想和软件开发基础很多人对前端工程化.组件化.模块化.MVC这些"高大上"的词汇云里雾里.本文用最简单的语言介绍一下我对工程化.组件化.模块化的理解

[转载]前端工程——基础篇

特别声明:本文转载@云龙的<前端工程——基础篇>,感谢@云龙的分享. 喂喂喂,那个切图的,把页面写好就发给研发工程师套模板吧. 你好,切图仔. 不知道你的团队如何定义前端开发,据我所知,时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位,虽然身份之争多少有些无谓,但我对这种偏见还是心存芥蒂,酝酿了许久,决定写一个系列的文章,试着从工程的角度系统的介绍一下我对前端,尤其是Web前端的理解. 只要我们还把自己的工作看作为一项软件开发活动,那么我相信读过下面的内容你也一定会有所共鸣. 前端,是

前端优化带来的思考,浅谈前端工程化

重复优化的思考 这段时间对项目做了一次整体的优化,全站有了20%左右的提升(本来载入速度已经1.2S左右了,优化度很低),算一算已经做了四轮的全站性能优化了,回顾几次的优化手段,基本上几个字就能说清楚: 传输层面:减少请求数,降低请求量执行层面:减少重绘&回流 传输层面的从来都是优化的核心点,而这个层面的优化要对浏览器有一个基本的认识,比如: ① 网页自上而下的解析渲染,边解析边渲染,页面内CSS文件会阻塞渲染,异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源,新开线

前端工程——基础篇

# 前端工程--基础篇 > 喂喂喂,那个切图的,把页面写好就发给研发工程师套模板吧. 你好,切图仔. 不知道你的团队如何定义前端开发,据我所知,时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位,虽然身份之争多少有些无谓,但我对这种偏见还是心存芥蒂,酝酿了许久,决定写一个系列的文章,试着从工程的角度系统的介绍一下我对前端,尤其是Web前端的理解. 只要我们还把自己的工作看作为一项软件开发活动,那么我相信读过下面的内容你也一定会有所共鸣. ## 前端,是一种GUI软件 现如今前端可谓包罗万象

四大维度解锁Webpack3.0前端工程化

四大维度解锁Webpack3.0前端工程化网盘地址:https://pan.baidu.com/s/1NBzFqMELoFxxvFtxp0YluQ 密码: pd36备用地址(腾讯微云):https://share.weiyun.com/50QY3pp 密码:d4uwwj 第1章 课程简介讲述课程背景,从前端开发的变化 到 前端工具的发展变化,介绍了课程内容,课程安排. 第2章 学习准备讲述模块化开发的思想.学习环境准备,webpack 的概况,版本更迭,核心概念等,为开始实践学习webpack