用yarn已经搭建好了vue3项目项目里还需要配什么具体操作

除了使用yarn搭建Vue 3项目之外，您还需要进行以下操作：

安装Vue Router和Vuex

Vue Router和Vuex是Vue 3中常用的路由和状态管理工具，需要在项目中安装并配置使用。

安装Vue Router：

yarn add vue-router@next

安装Vuex：

yarn add vuex@next

配置Babel

如果您需要在项目中使用ES6+的语法，那么需要在项目中配置Babel。

安装Babel：

yarn add -D babel-loader @babel/core @babel/preset-env

然后在项目根目录下新建一个.babelrc文件，输入以下代码：

{
  "presets": ["@babel/preset-env"]
}

配置Webpack

如果您需要在项目中使用Webpack来打包和管理资源，那么需要在项目中进行相关配置。

安装Webpack：

yarn add -D webpack webpack-cli webpack-dev-server

然后在项目根目录下新建一个webpack.config.js文件，输入以下代码：

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
    ],
  },
  resolve: {
    extensions: [".js", ".vue"],
  },
};

配置Vue Loader

如果您需要在项目中使用Vue单文件组件，那么需要在项目中安装并配置Vue Loader。

安装Vue Loader：

yarn add -D vue-loader@next vue-template-compiler

然后在webpack.config.js文件中添加以下代码：

{
  test: /\.vue$/,
  use: "vue-loader",
}

配置PostCSS

如果您需要在项目中使用PostCSS来处理CSS，那么需要在项目中进行相关配置。

安装PostCSS：

yarn add -D postcss postcss-loader autoprefixer

然后在项目根目录下新建一个postcss.config.js文件，输入以下代码：

module.exports = {
  plugins: [
    require("autoprefixer")
  ]
}

然后在webpack.config.js文件中添加以下代码：

{
  test: /\.css$/,
  use: [
    "vue-style-loader",
    "css-loader",
    "postcss-loader"
  ]
}

配置ESLint

如果您需要在项目中使用ESLint来检查代码，那么需要在项目中进行相关配置。

安装ESLint：

yarn add -D eslint eslint-plugin-vue

然后在项目根目录下新建一个.eslintrc.js文件，输入以下代码：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
  ],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {},
};

配置Prettier

如果您需要在项目中使用Prettier来格式化代码，那么需要在项目中进行相关配置。

安装Prettier：

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

然后在.eslintrc.js文件中添加以下代码：

module.exports = {
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
};

然后在项目根目录下新建一个.prettierrc文件，输入以下代码：

{
  "singleQuote": true,
  "semi": false
}

以上就是在使用yarn搭建Vue 3项目后需要进行的操作