框架搭建方法

vue

vue create <项目名>

即可搭建

运行：npm run serve

搭建：npm run build

react

使用npm安装create-react-app模块

create-react-app <项目名>

即可搭建

微信开发者工具

直接用微信开发者工具创建，无法对dom，bom操作

nuxt

使用npm安装create-nuxt-app模块

create-nuxt-app <项目名>

即可搭建

插件需要现用现配，写在nuxt.config.js文件中

nuxt命令启动、打包等，但不直接使用，而是再配置文件中定义命令用npm执行

运行： npm run dev

打包：npm run build （生成）、npm run start（生成并启动服务）

生成静态html：npm run generate

next

使用npm安装create-next-app模块

create-next-app <项目名>

即可搭建

运行： npm run dev

打包：npm run build （生成）、npm start（运行搭建好的服务）

vite迁移

注意！迁移方法慎用，虽然可以用但是不是最佳实践，配套使用才是正道

vue2从vue-cli迁移

1、在package.json中需要 安装vite-plugin-vue2及vite开发依赖，可以 删除@vue/cli-plugin-xxx开头的开发依赖；更改scripts中serve命令为dev命令，命令内容为vite。

vue3从vue-cli迁移

1、在package.json中需要 安装@vitejs/plugin-vue及vite开发依赖，可以 删除@vue/cli-plugin-xxx开头的开发依赖；更改scripts中serve命令为dev命令，命令内容为vite。

2、把public/index.html 移至项目的根目录，并添加

<script type="module" src="/src/main.js"></script>

可以考虑在body的#app下。并且在head、noscript中更改图标及文字信息等，注意更改时不要有语法错误，否则可能打包失败。

vue2从vue-cli迁移

3、在vite.config.js更改配置

import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import path from 'path';
export default defineConfig({
  plugins: [
    createVuePlugin(),
  ],
  // 配置别名@，如果没有配置需要手动更改组件位置为src
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src')
      }
    ]
  },
  // less全局样式导入
  css: {
    preprocessorOptions: {
		less: {
        additionalData: '@import "./src/style/variables.less";'
      }
    }
  }
})

vue3从vue-cli迁移

3、在vite.config.js更改配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [ vue() ],
  // 配置别名@，如果没有配置需要手动更改组件位置为src
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src')
      }
    ]
  },
})

4、导入组件等需要加入后缀 .vue

5、Vite 不识别 process.env, 取而代之的是：import.meta.env.，一般在router文件中需要更改。当然其他环境变量也需要按照vite配置。

6、babel.config.js等测试配置也需要更改。

详细参考：https://my.oschina.net/u/3487242/blog/5014721