vue单组件通过命令行运行预览
文章目录
- Vue 单组件通过命令行运行并预览
Vue 单组件通过命令行运行并预览
有时候在想写一个基于Vue的简单的 demo 的时候，需要先搭建一套可以使用的vue项目。步骤说不上繁琐，但是要么项目比较体积比较大，要么需要安装一大堆依赖插件才能预览 vue 组件的效果。
今天介绍一个比较方便的 vue 单组件预览，不需要什么配置，命令行直接执行这个vue单组件即可预览vue单组件的样式基本功能。
在介绍vue单组件预览之前，先了解一下以往的vue组件查看效果的几种方式。如下：
1. 搭建一个vue项目的几种方法
1.1 单页面应用
1.1.1 通过 @vue/cli 脚手架搭建
@vue/cli1
安装
@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@latest2
创建 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@latest3
创建 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.vueERR_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:174err = new Error(`Command failed: ${joinedCmd}${output}`);^Error: Command failed: pnpm run serve test.vueat 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:16at 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
}
4. 参考
-
@vue/cli ↩︎
-
vite@latest ↩︎
-
vue@latest ↩︎
