Vite 创建Vue2项目

1. 根据vite官网指引，使用命令npm init vite@laest，运行如下：

命名项目：Project name : project1

选择模板：Select a framework: vanilla (空模板)

然后依次执行：

Done. Now run:

  cd project1
  npm install
  npm run dev

打开Local: http://localhost:3000/，访问页面如下：

现在项目文件目录如下：

分析当前的项目可发现是用最原生的html\javascript\css技术栈，我们想引入当前用到比较多的Vue2.x作为项目开发的主要框架，方便项目开发。

2. 引入vue2

• 首先安装：npm install vue （此命令当前时间点默认安装Vue2）

• 然后我们创建一个项目源码的文件夹 src

• 在src目录下新建一个App.vue文件，按vue2的语法写一些内容

• main.js 移入src目录下，引入Vue，初始化Vue，引入并渲染App.vue

• index.html 中main.js文件的引入路径改为 /src/main.js

• 重新运行npm run dev，发现报错

3. 引入 vite-plugin-vue2插件

• 执行命令 npm install vite-plugin-vue2

• 新建配置文件 vite.config.js，并添加内容

import { createVuePlugin } from 'vite-plugin-vue2'

export defalut {
    plugins: [ createVuePlugin() ]
}

再次运行 npm run dev, 继续报错

4. 按提示安装vue-template-compiler

运行 npm install vue-template-compiler

再次执行： npm run dev

项目可以正常启动，使用Vite、Vue2搭的架子，接下来就可以愉快的做需求了。

注： 有兴趣入门前端的加我VX，常年在一线大厂，技术很一般般般般......--擅长带人入门前端--........