vue-cli3快速原型开发

Z时代
2024-01-10
分类：综合

vue

先来讲一下，什么是快速原型开发。

当我们需要紧急或提前开发单独的一个页面时，有时候不需要在原项目中创建一个页面，再开发，我们可以单独的区开发这个项目，那么怎样单独的区开发这个项目呢，之前使用过vue-cli的都知道，用vuecli创建出来一个项目需要有各种配置啊，入口文件啊，出口文件啊什么的，但是vue-cli3为我们提供了一项快速原型开发模式，我们不需要去配置这些东西（有需要也可以配置），就可以快速的去开发者个单独的页面。下面来说一下步骤：

实现需要准备必备条件：

node安装上（8.11+）。

若之前安装过vue2的vue-cli，则需要先卸载它，在安装vue-cli3

首先，卸载老的vue-cli

npm uninstall vue-cli -g

安装一个新vue-cli

npm install -g @vue/cli

你还可以用这个命令来检查其版本是否正确 (3.x)：

vue --version

以上步骤每台电脑上只需要进行一次，以后就不需要进行了。

你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展：

npm install -g @vue/cli-service-global

vue serve 的缺点就是它需要安装全局依赖，这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。

vue serve(开发模式)

我们需要建立一个入口文件，在这里开发（App.vue）

<template>
  <h1>Hello!</h1>
</template>

然后在这个 App.vue 文件所在的目录下运行：

vue serve

然后在浏览器地址栏输入http://localhost:8080/app就可以访问App.vue页面了

vue serve 使用了和 vue create 创建的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。你也可以显式地指定入口文件：