您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

一步步从头搭建 Vue 开发环境

时间:2020-08-26 10:15:39  来源:  作者:
一步步从头搭建 Vue 开发环境

 

作者:小生方勤

转发链接:https://mp.weixin.qq.com/s/bl5nHiRz7rGc5TbVbk-4rQ

前言

由于是工具,很可能你看到的时候有些工具包已经升级了,会有一些报错;这个你就需要自己探索了。

工具的版本

  1. node: v10.16.0
  2. npm: v6.9.0
  3. babel: 7.5.5
  4. webpack: 4.38.0

入题

提醒:在我们开始之前,你先检查下你相关工具的包是不是和我的一样,以免报一些版本的错误。

首先我们先大致了解下一个完整的脚手架帮我们做了哪些工作:

  1. ES6+ 语法转换成 ES5 语法
  2. .vue 转换成 js 文件
  3. 代码热更新
  4. 加载各种静态资源
  5. 本地提供静态服务 ……

你可以理解成脚手架帮我们完成了业务逻辑之外的大部分繁琐的工程配置,让我们能快速的进入项目的开发。不过这似乎不利于个人的发展,我们作为有格局的前端,这些有工程配置的工作我们也是需要了解的,要不然你又只能回家继承几十亿的家产啦。

下面正式开始:

搭建 webpack 环境

webpack 简单来说就是前端模块化管理工具,这里不讲究具体的用处,如果不懂 webpack 的话建议先学习官方文档:https://www.webpackjs.com。

先确保你的项目中有 package.json 文件,如果没有可以使用 npm init 来创建。

我们先安装 webpack webpack-cli,安装在 devDependencies。

npm install webpack webpack-cli --save-dev

三点解释

--save 和 --save-dev 的区别

  1. --save:将包安装到 dependencies ,简写是 -S
  2. --save-dev:将包安装到 devDependencies 简写是 -D

dependencies 和 devDependencies 的区别

  1. dependencies:运行时的依赖,即这个模块在生产环境下还需要使用;
  2. devDependencies:开发时的依赖。即这个模块只是在开发时使用。

webpack-cli 是什么

webpack4.0 后将 webpack-cli 从 webpack 中分离了出来,所以我们现在需要单独安装。

webpack-cli 为提供了一组灵活的命令,用于在设置自定义 webpack 项目时提高速度。也就是说你没有安装 webpack-cli,你是无法使用 webpack 命令的。

webpack 环境搭建成功了吗?

现在看看 webpack 的环境是否搭建好了。

我们先新建一个文件 src/main.js:

一步步从头搭建 Vue 开发环境

 

// main.js 文件代码
const name = '小生方勤';
let hello = `hello ${name}`;

我们运行以下命令后:

webpack ./src/main.js --mode development

发现项目中多了个 dist/main.js 文件,说明 webpack 环境算是安装好了。

一步步从头搭建 Vue 开发环境

 

不过我们发现代码还是使用的模板字面量语法(ES6 语法),这在部分浏览器是会报错的。所以这个时候我们就需要 Babel 来帮助我们将 ES6+ 的语法转换成浏览器可以识别的语法。

接下来我们就讲讲 Babel 的配置。

为项目配置 Babel

如果你想了解下 Babel,你可以看看之前写的文章 关于 Babel 你必须知道的。

我们先安装相关依赖包:

npm install babel-loader @babel/core @babel/preset-env -D

我们新建一个 build/webpack.config.js 文件并做出如下配置( 配置 babel-loader ):

const path = require('path')
module.exports = {    mode: 'development',
    entry: {        // 入口文件        main: path.resolve(__dirname,"../src/main.js")
    },    output: {
        // 打包后文件输出的目录        path: path.resolve(__dirname,'../dist'),
        filename: 'js/[name].[hash:8].js'
    },    module: {        rules: [            {                test: /.js$/,                exclude: /node_modules/, // 加快处理速度                use: [                    {                        loader: 'babel-loader'
                    }                ]            }        ]    }}

然后我们在根目录新建一个文件 babel.config.js 并做出如下配置:

module.exports = {   
    presets: [        "@babel/env",
    ]};

我们再打包试试,你会发现已经转成 ES5 的语法了:

一步步从头搭建 Vue 开发环境

 

不过当你使用一些浏览器不能识别的语法的时候打包的时候就会报错,比如我们代码中使用了 Set():

一步步从头搭建 Vue 开发环境

 

下面我们就配置 @babel/polyfill。

按需引入 @babel/polyfill

先安装:

npm install @babel/polyfill -S

然后我们在根目录新建一个文件 babel.config.js 并做出如下配置:

module.exports = {   
    presets: [        [            "@babel/env",
            {                useBuiltIns: "usage",  // 按需加载 @babel/polyfill
            },        ],    ]};

这样配置后,打包出来的文件就只是仅仅打包了 polyfill 代码中需要使用的那部分,打包后的体积也大大减少了。

按需加载后文件体积小了 360KB 左右。

小提示: 打包生成的文件是不会自动删除的,需要我们配置 clean-webpack-plugin 插件。

接下来我们开始引入 Vue。

引入 Vue

我们先安装相关的包:

npm install vue -S
npm install vue-loader vue-template-compiler -D

现在项目目录大概是这样的:

一步步从头搭建 Vue 开发环境

 

然后我们将 main.js 代码改成:

import Vue from 'vue'
import App from './App.vue'
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
    render: h => h(App)
}).$mount(root)

因为要支持 .vue 文件,所以为我们在 webpack 也需要做相关的配置,即在 webpack.config.js 做如下配置;

...
module: {
    rules: [
        {            test: /.vue$/,            loader: 'vue-loader'
        }    ]},...

注意:vue-loader 在 15.* 之后的版本使用 vue-loader 都是需要依赖 VueLoaderPlugin 的,具体配置见源码。

做到这里是不是想看看这段代码在浏览器的运行结果呢?OK 我们继续配置。

配置 html-webpack-plugin 和 devServer

配置 html-webpack-plugin

npm install html-webpack-plugin -D

我们在根目录新建一个 index.html 文件,然后还是配置 webpack.config.js 文件;

plugins: [
    new CleanWebpackPlugin(),   // 清除 dist 的文件
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        inject: true
    }),]

打包后 dist 就会多一个 index.html 文件:

一步步从头搭建 Vue 开发环境

 

我们发现打包后的文件自动插入了 index.html 模板,并生成了一个新的 index.html 文件,细心的朋友应该看到了所有的文件都合并在 main.js 了,等下我就说说该如何把这个文件分开;在之前我们先看看如何实现开发环境热更新。

配置 devServer

先安装包:

npm install webpack-dev-server -D

还是在 webpack.config.js 添加配置:

devServer: {
    host: 'localhost',
    port: 8080,
    hot: true, // 热更新},plugins: [
    // 剩略了部分代码,详细的请看源码
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
]

然后我们在 package.json 加上一条命令:

"dev": "webpack-dev-server --config ./build/webpack.config.js"

接着我们就可以运行 npm run dev,我们直接看效果:

一步步从头搭建 Vue 开发环境

 

到这里我们的项目基本配置都有了,项目已经可以跑起来啦。

作者:小生方勤

转发链接:https://mp.weixin.qq.com/s/bl5nHiRz7rGc5TbVbk-4rQ



Tags:Vue 开发环境   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
作者:小生方勤转发链接:https://mp.weixin.qq.com/s/bl5nHiRz7rGc5TbVbk-4rQ前言由于是工具,很可能你看到的时候有些工具包已经升级了,会有一些报错;这个你就需要自己探索了。工...【详细内容】
2020-08-26  Tags: Vue 开发环境  点击:(65)  评论:(0)  加入收藏
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的  程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条