Vue(五)：脚手架

最新推荐文章于 2024-07-07 15:18:37 发布

莫亓

最新推荐文章于 2024-07-07 15:18:37 发布

阅读量192

点赞数

分类专栏：阿哈哈哈大前端

本文链接：https://blog.csdn.net/Bule_daze/article/details/103910784

版权

66 篇文章 1 订阅

订阅专栏

稍微像样一点的 vue.js 的开发过程，几乎总是需要使用脚手架的。使用它可以解锁新的可能：

一个 .vue 文件包含三个部分：<template> 标签包围内的是模板代码； <script> 内包围的是 js 代码，并且可以使用 ES6 的语法。 <style> 内的则是 css 代码。

然而，浏览器是无法识别这个看起来简单但是却不真实的组件的。因此 Vue.js 需要做打包，一个 预处理工作，把这样组件转换成为浏览器可以识别的格式。其中包括：

于是 webpack 首先调用 vue-loader，vue-loader 会调用 babel 转换 ES6 代码为 ES5 代码，并且把 css 和 html 作为模块也转换为客户端 js 代码。这些 js 代码浏览器就可以识别了。

把 webpack、babel 搭配起来需要很多配置，极为繁琐。vue.js 提供了一个工具，叫做 vue-cli，它可用于快速搭建应用起步代码。

包括：

可用的脚手架代码。
热重载。组件代码更新后自动重新加载。
静态代码检查。
ES6语言特性。

安装 vue-cli：
```
npm install -g vue-cli
```
使用 vue-cli 创建新项目：
```
vue init webpack my-project
```
参数 webpack，指明创建一个基于 “webpack” 模板的 vuejs 项目。此模板会创建一个 webpack 的脚手架代码。

webpack 是一个打包工具，可以把 js、css、image 打包成一个或者多个 js 文件，并且可以支持各种 loader 作为插件，对不同类型的文件做转换处理。实际上 webpack 就是通过插件 vue-loader，在加载 vue 类型的文件时做格式转换，把 vue 类型文件翻译为浏览器可以识别的 js 文件。

当前可以使用的模板有：
- webpack —— 通过 webpack 和 vue-loader 插件，可以调用 babel 把 .vue 文件编译为客户端可以识别的 js 文件。默认还可以提供热加载、代码检查、测试。
- webpack-simple ——最简单的 webpack 和 vue-loader 插件。
- browserify —— 通过 Browserify + vueify 的组合，可以调用 babel 把 .vue 文件编译为客户端可以识别的 js 文件。默认还可以提供热加载、代码检查、测试。
- browserify-simple —— 最简单的 Browserify + vueify 插件。

安装依赖：

cd my-project
npm install
npm run dev  # vue-cli的版本不同运行命令不同 (此命令为 vue-cli 2)

vue cli 升级步骤

此时服务器已经启动并监听到 8080 端口，使用浏览器访问 http://localhost:8080，可以看到 vue-cli 默认的界面。

在 components 文件夹下添加 .vue 文件，应用单文件组件。

如果代码被改动了，并不需要刷新浏览器，它会自动更新最新的代码过来。

我们所有的编辑修改一旦完成，最终需要把所有的 vue、ES6 代码等编译出来到 ES5 的 js 文件。现在可以构建这些 webpack 代码：

npm run build

此命令会把我们已经有的开发成果，编译到 dist 目录下，就是说编译成前端可以直接使用的 html、js、css。

有了它们，我就可以使用一个 http 静态服务器，在 dist 目录内执行：

cd dist
npm install http-server -g
http-server

然后，到 http://localhost:8080 查看效果。和运行 npm run dev 看到的一模一样。

🔗：

关注

专栏目录