江苏龙网

  1. 主页 > 生活百科 > >

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

Vue 开发环境


一步步从头搭建 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'                    }                ]            }        ]    }}


推荐阅读


上一篇：让双系统使用更轻松

下一篇：使用 HTTPie 进行 API 测试