前言：看到很多新手安装webpack之类的工具都需要逐一安装各种依赖，有时候也会出现版本不兼容等问题，这种情况下，我们可以使用一款基于webpack配置的基础脚手架——basys-cli. 本文将针对该工具的安装及使用方法，从入门到精通进行详细讲解。
一、安装
全局安装basys-cli称之为basys. 建议在安装时使用cnpm或者yarn加速，节约时间。
npm install -g basys-cli
二、项目启动
新建项目文件夹并且进入该目录：
mkdir myapp cd myapp
在该目录下，运行命令创建一个基础的开发环境：
basys init
接着基于开发环境启动开发服务器：
yarn serve
或者
npm run serve
至此，你就可以在浏览器上看到一个hello world的页面了。这里所说的开发环境分为开发环境(dev)和生产环境(production)，使用不同的环境进行编译，得到的结果也不一样。我们在搭建开发环境时，可以在.vscode中安装插件eslint，这款插件会基于我们已有的eslint配置文件，对我们的代码的语法和格式进行检测和筛查。
三、配置
我们在开发web项目的过程中，不只是需要处理前端UI和逻辑，还需要处理各种数据和网络请求，或数据库集成等。这种情况下我们需要进行配置。basys-cli对此也做了很好的支持。
这款工具大部分配置在config/index.js中，包括但不限于：
- 服务端口
- 生产环境配置
- 开发环境配置
我们可以新建文件vueconfig.js，通过commonJS规范进行编写。
以配置请求响应拦截为例，我们要新建一个js文件（如：src/request.js），用来添加请求拦截器和响应拦截器，拦截器的作用是进行一些前置的处理，比如我们在发网络请求时，可以在请求头中加上token等消息，也可以在响应处理时，加入全局的错误提示等等。
-- -------------------- ---- -------
------ ----- ---- --------
------
------------------------------------- -- -
------------------
------ -------
-- ----- -- -
-----------
------ ----------------------
---
------
---------------------------------------- -- -
---------
------ --------------
-- ----- -- -
-----------
------ ----------------------
---
------ ------- ------这样就能够保证我们每次请求都是包含token的，同时在接收网络请求时，也能够自动的根据不同HTTP请求的状态码，进行相应的处理，下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- ------------
------ - --------- - ---- ---------------
------ -------- ---------------- -
------ -----
---------------------
---------------- -- -
----------
------ --------------
--
-------------- -- -
----------
-----------
----- --------
-------- ----------------
---
------ ----------------------
---
-四、应用
现在，我们来实现一个基于Vue.js的应用程序。首先，我们可以在src/components中新建两个Vue组件(src/components/HelloWorld.vue和src/components/Greeting.vue)，对应于一个Hello World页面和一个问候页面。
HelloWorld.vue
-- -------------------- ---- -------
----------
-----
--------- -----------
--------- ---------------- --
------
-----------
--------
------ -------- ---- ---------------------------
------ ------- -
----- -------------
----------- -
--------
--
------ -
------ -
--------- -- ----------
-
--
--------- - ---------------
--------
---------------------------------
------------- - ----------------
--
-
-
---------
------ -------
-- --------------------- --
-- -
------ -----
-
--------Greeting.vue
-- -------------------- ---- -------
----------
------ -- ---- --------
-----------
--------
------ ------- -
----- -----------
------ -
----- ------ ---------
-
-
---------
------ -------
-- --------------------- --
-- -
------ ------
-
--------在App.vue中进行组件的挂载：
-- -------------------- ---- -------
----------
---- ---------
----------- --
------
-----------
--------
------ ---------- ---- -----------------------------
------ ------- -
----- ------
----------- -
----------
-
-
---------
-------
-- ---- --
---- -
------------ ------- ---------- ------ -----------
----------------------- ------------
------------------------ ----------
----------- -------
------ --------
----------- -----
-
--------五、打包
在进行打包时，也可以根据自己的需求添加各种插件和配置项。在命令行中输入：
basys build
就可以在dist/目录中找到打包好的文件。这里配置了对webpack打包后的js文件代码进行压缩。当然，还可以进行代码混淆、加密等操作，以保证代码的安全性。
结束语
在本篇教程中，介绍了如何快速搭建一个基础的Vue.js应用程序，其中使用了npm包basys-cli，分别介绍了如何安装、如何开启开发服务器、如何进行配置、如何在应用中使用这个工具，最后讲到了Vue应用程序的打包方法。希望本篇文章能够对初学者有所帮助，同时也欢迎各位前端开发人员来探讨更深入的用法和更高级的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79297