1、创建前段项目（Vue3+webpack5+Tsx）

CodeWly
157 阅读4分钟

一、gitHub 创建项目Projects

兄台过于简单不再赘述

二、拉取项目

  1. 找一个目录
  2. 打开终端
  3. git clone {项目克隆地址}
  4. 切入项目 cd Projects

三、初始化项目

  1. 造一个自己本地分支
git checkout -b code-wly-mac
##名字自己整
  1. 初始化项目
npm init
## 想配就配，不想就一路回车，管不到你们
  1. 安装Vue3(这个不要用官方的方法，咱是要配置Webpack滴)
yarn add vue
##我习惯用yarn，npm也行，管不到
  1. 安装typescript
yarn add typescript
  1. 安装Webpack套装（不解释套装）
yarn add  webpack webpack-cli webpack-dev-server webpack-merge -D
  1. 创建build目录，和相关文件

biu：这个目录存放webpack配置文件

|Projects
-build  //webpack配置文件
    -webpack.base.js    //基础配置，公用部分
    -webpack.prod.js    //发布环境配置
    -webpack.dev.js    //生产环境配置
-/build
-package.json
yarn.lock
|Projects

7.配置webpack.base.js，基础配置

安装依赖

yarn add html-webpack-plugin css-loader less-loader text-loader file-loader thread-loader mini-css-extract-plugin -D
yarn add vue-loader@next @vue/compiler-sfc @babel/preset-env @vue/cli-plugin-babel @babel/preset-typescript babel-loader @babel/core -D

配置

//webpack.base.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
const resolve = (dir) => path.resolve(__dirname, dir);
module.exports = {
  entry: "./src/main.ts", //配置入口文件
  plugins: [
    new HtmlWebpackPlugin({
      //生成入口HTML文件
      template: "./index.html",
      filename: "index.html",
    }),
    new MiniCssExtractPlugin({
      //提取css到单独的文件中
      filename: "[name].css",
      chunkFilename: "css/chunk.[name].css",
      ignoreOrder: true,
    }),
  ],
  module: {
    rules: [
      //处理css 文件
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      //处理less文件
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "less-loader", "css-loader"],
      },
      //处理vue文件
      {
        test: /\.vue$/,
        use: [
          {
            loader: "vue-loader",
            options: {
              cssModules: {
                localIdentName: "[path][name]---[local]---[hash:base64:5]",
                camelCase: true,
              },
            },
          },
        ],
      },
      //处理ts,tsx,js文件
      {
        test: /\.(js|ts|tsx)$/,
        exclude:
          /(node_modules|scripts[\\/]libs|geojson[\\/]new|share[\\/]libs|scripts\\i18n\\index)/,
        use: [
          "thread-loader",
          {
            loader: "babel-loader",
            options: {
              rootMode: "upward",
              cacheDirectory: true,
            },
          },
        ],
      },
      //处理html
      {
        test: /\.html$/,
        use: [{ loader: "text-loader" }],
      },
      //处理图片
      {
        test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "[path][name].[ext]",
              limit: 64,
              outputPath: "images",
            },
          },
        ],
      },
      //处理其他文件
      {
        test: /\.(woff2?|eot|ttf|otf|mtl|obj)(\?.*)?$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[path][name].[ext]",
              outputPath: "font",
            },
          },
        ],
      },
    ],
  },
  resolve: {
    alias: {
      //别名配置
      "@": resolve("../src"),
      src: resolve("../src"),
      components: resolve("../src/components"),
      router: resolve("../src/router"),
      store: resolve("../src/store"),
      views: resolve("../src/views"),
      apis: resolve("../src/apis"),
    },
    extensions: [".tsx", ".ts", ".wasm", ".mjs", ".js", ".json"],
  },
};
  1. 配置babel

根目录创建babel.config.js

|Projects
-build  //webpack配置文件
    -webpack.base.js    //基础配置，公用部分
    -webpack.prod.js    //发布环境配置
    -webpack.dev.js    //生产环境配置
-/build
-babel.config.js
-package.json
yarn.lock
|Projects

配置

//babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          browsers: ["last 1 version"],
        },
        exclude: ["transform-async-to-generator", "transform-regenerator"],
      },
    ],
    ["@vue/cli-plugin-babel/preset"],
    ["@babel/preset-typescript"],
  ],
};
  1. 配置webpack.dev.js
//webpack.dev.js
const common = require("./webpack.base");
const { merge } = require("webpack-merge");
module.exports = merge(common, {
  devtool: "inline-source-map", //控制台调试代码
  mode: "development", //开发环境webpack内置优化
  devServer: {
    client: {
      progress: true,
    },
    compress: true, //gzip压缩
    hot: true, //热更新
    // open: true, //自动打开默认浏览器
    open: {
      app: {
        name: "goole-chrome", //走动打开chrome
        arguments: ["--incognito", "--new-window"], //无痕，新的窗口
      },
    },
    port: 8081, //监听端口
    proxy: {}, //代理配置
  },
});
  1. 配置webpack.prod.js
//webpack.prod.js
const common = require("./webpack.base");
const { merge } = require("webpack-merge");
const path = require("path");

module.exports = merge(common, {
  mode: "production",
  output: {
    //出口
    path: path.resolve(__dirname, "../dist"), //输出路径
    clean: true, //清空打包文件
    filename: "js/[name].[chunkhash].js", //输出文件名
    chunkFilename: "js/[name].[chunkhash].js", //输出异步文件文件名
  },
});
  1. 配置启动命令
//package.json
{
...
"scripts": {
    "start": "npm run dev",
    "dev": "webpack-dev-server --hot --open --config build/webpack.dev.js",
    "build": "webpack --config build/webpack.prod.js"
  },
...
}
  1. 根目录创建index.html文件
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Projects</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
  1. 根目录创建src目录，以及相关文件

创建src目录

src目录下创建App.tsx

import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const title = ref<string>("Hello Projects!");
    const auther: string = "Code Wly";
    return () => (
      <>
        <div class="app">{title.value}</div>
        <div class="auth">auther:{auther}</div>
      </>
    );
  },
});

src目录下创建main.ts

import { createApp } from "vue";
import App from "./App";
const app = createApp(App);
app.mount("#app");

src目录下创建shims-vue.d.ts

biu：shims-vue.d.ts是为了 typescript 做的适配定义文件，因为.vue 文件不是一个常规的文件类型，ts 是不能理解 vue 文件是干嘛的，加这一段是是告诉 ts，vue 文件是这种类型的。

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

declare module "*.svg" {
  const centent: string;
  export default centent;
}
  1. 根目录创建tsconfig.json文件
{
    "include": ["src"],
    "exclude": ["node_modules", "dist", "assets/"],
    "compilerOptions": {
        "jsx": "preserve",
        "jsxFactory": "h",
        "strictNullChecks": true,
        "allowJs": true,
        "moduleResolution": "node",
        "isolatedModules": false,
        "lib": ["dom", "es5", "es6", "es7", "es2015.promise"],
        "sourceMap": true,
        "pretty": true,
        "typeRoots": [
            "src/globalDeclare"
        ],

        "target": "ES5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
        "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
        "checkJs": false /* Report errors in .js files. */,
        "downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
        "strict": false /* Enable all strict type-checking options. */,
        "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
        "paths": {
            "@/*": ["src/*"],
            "src/*": ["src/*"],
            "apis/*": ["src/apis/*"],
            "components/*": ["src/components/*"],
            "config/*": ["src/config/*"],
            "hook/*": ["src/hook/*"],
            "router/*": ["src/router/*"],
            "store/*": ["src/store/*"],
            "theme/*": ["src/theme/*"],
            "util/*": ["src/util/*"],
            "views/*": ["src/views/*"],
        },
        "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
        "esModuleInterop": true,
        "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
        "emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */,
        "resolveJsonModule": true
    },
}
  1. 配置.gitignore

这个是git忽略的文件

.DS_Store
.history
node_modules
/dist
package-lock.json

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

四、最终目录结构

..
-build
    -webpack.base.js    //基础配置，公用部分
    -webpack.prod.js    //发布环境配置
    -webpack.dev.js    //生产环境配置
-/build
-/src
    -index.tsx    //入口文件
    shims-vue.d.ts //解决 vue 类型报错
-src
-index.html //模板
-tsconfig.json  //ts配置
-babel.config.js  //babel配置
-package.json   //package相关配置
-yarn.lock 或者 package.lock.json //依赖锁
-node_modules //node包
-.gitignore
..

五、启动

yarn start

六、上传到远程仓库

git add .
git commit -m "init：初始化项目"
git push --set-upstream origin code-wly-mac -u

七、合并到主分支

到了最后就去github自己合并到主分支，不谢！


gitHub地址github.com/myselfwly/P…

avatar
文章
阅读
粉丝