vue 创建新项目

vue依赖于npm和node，又因为npm依赖于node，所以在新建项目前先安装好node，也可以安装nvm后续方便切换node版本，打开cmd窗口，输出node -v和npm -v看看有无安装成功。

有显示指定版本说明安装成功，接着就可以愉快得去创建我们的vue项目啦宝子!

1.基于vite构建，create-vue创建一个新的vue项目（官方推荐）

vite创建项目默认是vue3的，vue2的话需要用上插件vite-plugin-vue2。

首先讲下官方推荐的创建vue3项目方式

npm create vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: …
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./…
Done.

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

你现在应该已经运行起来了你的第一个 Vue 项目！请注意，生成的项目中的示例组件使用的是组合式 API 和 <script> setup>，而非选项式 API。

当你准备将应用发布到生产环境时，请运行：

> npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。

1.1也可以通过create-vite这个第三方包初始化新项目（创建vue、react都可以），具体如下：

首先，在终端命令行中输入如下的命令：

npm create vite

在执行完上面的命令后，npm 首先会自动下载create-vite这个第三方包，然后执行这个包中的项目初始化逻辑。输入项目名称之后按下回车，此时需要选择构建的前端框架：

✔ Project name: vite-project
? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla // 无前端框架
    vue     // 基于 Vue 
 >  react   // 基于 React
    preact  // 基于 Preact（一款精简版的类 React 框架）
    lit     // 基于 lit（一款 Web Components 框架） 
    svelte  // 基于 Svelte

此处，我们选择构建的框架为React（想初始化vue就键盘上下键选择到vue再回车就可以）。接着，执行如下命令在启动本地项目：

cd vite-project
npm install
npm run dev

安装完成之后，去浏览器中打开http://localhost:5173/页面就可以看到示例项目了。

2.基于webpack方式创建项目，安装脚手架vue-cli：

输入命令：npm install -g @vue/cli、
接着用命令 vue --version 查看是否安装成功

2.1.新建项目：
命令：vue create 项目名

2.2.创建成功，按照提示进入vscode切换到指定文件夹，执行npm run serve 运行项目：

启动完毕：

3.通过 CDN 使用 Vue

如果你只是想简单的写写vue代码，你可以借助 script 标签直接通过 CDN 来使用 Vue：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

感谢阅读，有帮助的话点点赞点点关注谢谢哈。