vue创建项目升级成 3.0

### 使用 Vue CLI 创建 Vue 3.0 项目的教程 #### 准备工作 确保已安装 Node.js 和 npm。接着，需确认 @vue/cli 版本在 4.5.0 以上，可通过命令 `vue -V` 或者 `vue --version` 来查看当前版本[^3]。 #### 安装或升级 @vue/cli 如果未安装或需要更新至最新版，可以执行如下命令来全局安装最新的 @vue/cli： ```bash npm install -g @vue/cli ``` #### 创建项目 通过下面的命令启动创建过程，其中 `vue3-test` 可替换为想要的名字： ```bash vue create vue3-test ``` 在此过程中会提示选择预设配置或是手动配置选项，在这里可以选择特定于 Vue 3 的设置[^2]。 #### 配置环境 当选择了手动配置时，会有机会挑选 Babel、TypeScript 等工具的支持以及 Linter / Formatter 工具的选择。对于希望紧跟技术潮流的开发者来说，这是一个定制化开发体验的好时机[^1]。 #### 启动服务 进入刚刚创建好的项目文件夹内，并利用以下指令开启本地服务器以便实时预览应用效果： ```bash cd vue3-test npm run serve ``` 这一步骤能够让开发者立即看到所做更改的效果，极大地提高了工作效率[^5]。 #### 示例代码片段展示基础结构 以下是简单的 App.vue 文件内容作为例子： ```html <template> <div id="app"> {{ message }} </div> </template> <script> export default { name: &#39;App&#39;, data() { return { message: &#39;Welcome to Your Vue.js App&#39; } } } </script> <style scoped> #app { font-family: Avenir, Helvetica, Arial, sans-serif; text-align: center; color: #2c3e50; margin-top: 60px; } </style> ```