文章目录
Vue 单组件通过命令行运行并预览
有时候在想写一个基于Vue的简单的 demo 的时候,需要先搭建一套可以使用的vue项目。步骤说不上繁琐,但是要么项目比较体积比较大,要么需要安装一大堆依赖插件才能预览 vue 组件的效果。
今天介绍一个比较方便的 vue 单组件预览,不需要什么配置,命令行直接执行这个vue单组件即可预览vue单组件的样式基本功能。
在介绍vue单组件预览之前,先了解一下以往的vue组件查看效果的几种方式。如下:
1. 搭建一个vue项目的几种方法
1.1 单页面应用
1.1.1 通过 @vue/cli
脚手架搭建
@vue/cli
1
安装
@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
2
创建 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
3
创建 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".
xxx\npm\node_modules\@vue\cli\node_modules\.store\execa@1.0.0\node_modules\execa\index.js:174
err = new Error(`Command failed: ${joinedCmd}${output}`);
^
Error: Command failed: pnpm run serve test.vue
at makeError (xxx\npm\node_modules\@vue\cli\node_modules\.store\execa@1.0.0\node_modules\execa\index.js:174:9)
at xxx\npm\node_modules\@vue\cli\node_modules\.store\execa@1.0.0\node_modules\execa\index.js:278:16
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async runNpmScript (xxx\npm\node_modules\@vue\cli\lib\util\runNpmScript.js:17:10) {
code: 1,
stdout: null,
stderr: null,
failed: true,
signal: null,
cmd: 'pnpm run serve test.vue',
timedOut: false,
killed: false
}