- 首先确保已安装 18.0 或更高版本的Node.js。
- 运行VSCode，将终端的当前目录切换到打算新建项目的目录下。
- 运行npm create vue@latest
可选功能项如果不确定是否需要，可以先全部选否。 - 然后依次运行绿色的三条命令。
- 在浏览器打开蓝色的链接，发现已经OK了。
- 在vscode工作区打开新建项目的目录。到这一步已经搭建完成了，别忘了安装一下Vue-Official插件。接下来的步骤完成一个小实例。
- 在文件里加入下面的代码，导入映射表。
<script type="importmap"> { "imports": { "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js" } } </script>再把<body>元素里的<script>元素改成如下所示。
<script type="module"> import { createApp } from 'vue' import MyComponent from './script.js' createApp(MyComponent).mount('#app') </script>整体如图：
-
在根目录下新建一个.js文件，用来放置我们编写的js代码。
-
先写入示例代码。
import { ref } from 'vue' export default { setup() { const count = ref(0) return { count } }, template: `<div>count is {{ count }}</div>` } -
然后在终端运行npx serve。如果报错的话，尝试运行npm install -g npm@latest，更新一下npm。
-
运行成功的话，就可以打开提示的链接了。
-
用浏览器打开，如图代表已经ok了。
更多细节参考官方指南：
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
