vue单组件通过命令行运行预览网站首页 技术杂谈

vue单组件通过命令行运行预览

百里狂生 2023-05-25 16:00:02

简介vue单组件通过命令行运行预览

文章目录

Vue 单组件通过命令行运行并预览

Vue 单组件通过命令行运行并预览

有时候在想写一个基于Vue的简单的 demo 的时候，需要先搭建一套可以使用的vue项目。步骤说不上繁琐，但是要么项目比较体积比较大，要么需要安装一大堆依赖插件才能预览 vue 组件的效果。

今天介绍一个比较方便的 vue 单组件预览，不需要什么配置，命令行直接执行这个vue单组件即可预览vue单组件的样式基本功能。

在介绍vue单组件预览之前，先了解一下以往的vue组件查看效果的几种方式。如下：

1. 搭建一个vue项目的几种方法

1.1 单页面应用

1.1.1 通过 `@vue/cli` 脚手架搭建

@vue/cli¹

安装 @vue/cli 脚手架

# 安装脚手架
$ npm install -g @vue/cli
# 查看 Vue 版本号
$ vue --version

创建 Vue 项目

# 创建 vue 项目
$ vue create my-project

启动 Vue 项目

# 打开文件夹
$ cd my-project
# 启动 vue 项目
$ npm run serve

1.1.2 通过 vite@latest 前端构建工具搭建

vite@latest²

创建 vue 项目

# 创建 vue 项目
$ npm create vite@latest my-project --template vue

启动 vue 项目

# 启动 vue 项目
$ npm run dev

1.1.3 通过模板项目搭建

创建 vue 项目

# 克隆 vue 项目
$ git clone https://xxx.git
# 清除 git 仓库
$ rm -rf .git
# 初始化本地仓库
$ git init
# 链接远程仓库
$ git remote add origin https://xxx.git
# 初始化项目
$ npm init
# 强制推送到远程仓库
$ git push -f origin master

启动 vue 项目

# 启动 vue 项目
$ npm run serve

1.1.4 使用最新版的 node 搭建

vue@latest³

创建 vue 项目

# 创建 vue 项目
$ npm init vue@latest

启动 vue 项目

# 启动 vue 项目
$ npm run dev

1.2 多页面应用（非vue组件形式）

1.2.1 通过CDN引入单文件HTML

创建 vue 项目

<!DOCTYPE html>
	<head>
		<title>Vue 项目</title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app"></app>
		<script>
			// ...
		</script>
	</body>
</html>

安装本地服务插件

# 安装本地服务插件
$ npm install -g http-server

启动 vue 项目

# 打开项目文件夹
cd my-project
# 启动 vue 项目
$ http-server -p 8080

1.2.2 通过下载源文件，相对路径引入HTML

<!DOCTYPE html>
	<head>
		<title>Vue 项目</title>
		<script src="../dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app"></app>
		<script>
			// ...
		</script>
	</body>
</html>

安装本地服务插件

# 安装本地服务插件
$ npm install -g http-server

启动 vue 项目

# 打开项目文件夹
cd my-project
# 启动 vue 项目
$ http-server -p 8080

2. 写一个简单的 demo 通过命令行预览

2.1 安装 vue 脚本工具

# 安装 vue 脚手架工具
$ npm install -g @vue/cli
# 安装 vue 单组件预览工具
$ npm install -g @vue/cli-service-global

2.2 创建 vue 单组件

<!-- test.vue -->
<template>
	<div>{{ message }}</div>
</template>

<script>
export default {
	data() {
		return {
			message: 'Hell World !'
		}
	}
}
</script>

<style scoped>

</style>

2.3 启动 vue 单组件预览效果

# 启动 vue 单组件
$ vue serve test.vue

3. 问题

3.1 vue serve test.vue 无法使用

xxx>vue serve test.vue
Running pnpm run serve test.vue
 ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND  No package.json (or package.yaml, or package.json5) was found in "xxx".
xxxnpmnode_modules@vueclinode_modules.storeexeca@1.0.0node_modulesexecaindex.js:174
                err = new Error(`Command failed: ${joinedCmd}${output}`);
                      ^

Error: Command failed: pnpm run serve test.vue
    at makeError (xxxnpmnode_modules@vueclinode_modules.storeexeca@1.0.0node_modulesexecaindex.js:174:9)
    at xxxnpmnode_modules@vueclinode_modules.storeexeca@1.0.0node_modulesexecaindex.js:278:16
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async runNpmScript (xxxnpmnode_modules@vueclilibutilrunNpmScript.js:17:10) {
  code: 1,
  stdout: null,
  stderr: null,
  failed: true,
  signal: null,
  cmd: 'pnpm run serve test.vue',
  timedOut: false,
  killed: false
}