初始化创建Vue工程的3种方法

初始化创建Vue工程的3中方法

1.使用cdn引用

对于制作原型或学习，你可以这样使用最新版本：（适用于学习）

<script src="https://unpkg.com/vue@next"></script>

2.使用 Vue CLI 工具

​ 不同于Vue 框架，Vue CLI 只是一个工具，使用这个工具能够创建具有某些配置，某些内置工具的项目，使用 Vue CLI 有助于开发大型复杂的 Vue App。

使用 Vue CLI 创建项目步骤如下：

1. 安装 Node

   • Vue CLI 在后台使用 NodeJS，要使用 Vue CLI，首先必须下载并安装 Node.js。Vue CLI 当前不支持 Node 17 版本，所以 node 应安装 LTS 版本。

2. 运行命令 npm install -g @vue/cli

   • 参考网页：https://cli.vuejs.org/guide/installation.html

此命令将在系统上全局安装 Vue CLI 工具。

3. 创建Vue 工程
   • 运行命令：vue create my-first-vue-app
   • 参考网页：https://cli.vuejs.org/guide/creating-a-project.html

在项目路径下运行此命令，创建并初始化一个名称为 my-first-vue-app 的 Vue 工程。

3. 使用命令 npm init vue

npm init vue@latest

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

✔ Project name: … <your-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 Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in ./<your-project-name>...
Done.

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

cd <your-project-name>
npm install
npm run dev

综上，创建简单的 demo 小程序，可以使用方法1。要创建大型复杂的程序，使用方法2 或者方法3，方法3是 https://vuejs.org/guide/quick-start.html 上列出的方法，比方法2新。

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

npm run build

如何运行一个Vue项目

运行命令npm run serve 或者npm run dev 根据vue版本来选

如果报错提示操作系统不一致之类的可以试试删掉项目文件下的node_modules 然后运行npm ci npm install

然后再重新运行