前端怎么搭建chatgpt 前端如何搭建项目

转载

编程小达人之心 2024-06-13 21:33:11

文章标签 前端怎么搭建chatgpt 前端 javascript webpack css 文章分类 深度学习人工智能

一、我们先把webpack走通

1、先安装相关依赖，webpack是用来处理命令行参数的，但是我不准备使用webpack-cli，但是还是要求必须安装webpack-cli

npm install webapck webpack-cli --save-dev

2、npm init -y

3、创建项目结构

前端怎么搭建chatgpt 前端如何搭建项目_css

build.js

const webpack = require('webpack')
const config = require('../webpack.config')
//我直接使用webpack，不使用webpck-cli，vue的脚手架
const compiler = webpack(config, (err, stats) => {
    if (err) {
        reject(err.stack || err)
    } else if (stats.hasErrors()) {
        let err = ''

        stats.toString({
            chunks: false,
            colors: true
        })
            .split(/\r?\n/)
            .forEach(line => {
                err += `    ${line}\n`
            })
    } else {

    }
})

webpack.config.js

const path = require("path");//nodejs里面的基本包，用来处理路径
//我们先打个基本的包
module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, 'dist'),
        filename: "bundle.js"
    },
};

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
  </head>
  <body>
    <script src="../dist/bundle.js"></script>
  </body>
</html>

index.js

import count from './count';

function component() {
    const element = document.createElement('div');
    element.innerHTML = `hello world-${count(3, 6)}`;
    return element;
}

document.body.appendChild(component());

count.js

export default function count(x, y) {
    return x - y;
}

在package.json中添加script配置

{
  "name": "test-build-project",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "devDependencies": {
    "webpack": "^5.76.1",
    "webpack-cli": "^5.0.1"
  },
  "scripts": {
    "build": "node ./config/build.js"
  },
  "author": "",
  "license": "ISC"
}

3、执行打包命令，就生成了我们的打包内容

npm run build

前端怎么搭建chatgpt 前端如何搭建项目_css_02

此时index.html就打印出了我们的内容

前端怎么搭建chatgpt 前端如何搭建项目_webpack_03

二、集成vue

1、安装vue相关的依赖，因为我们用到了vue以及webpack，webpack已经安装了，除了这些呢，还有：
vue：vue的依赖。
vue-loader可以除了.vue后缀的文件，Vue-loader在15.*之后的版本都是vue-loader的使用都是需要伴生 VueLoaderPlugin的，这个就是为了用webpack加载.vue文件，并将它编译成浏览器能认识的js文件。
url-loader 可以识别图片的大小，然后把图片转换成base64，从而减少代码的体积，如果图片超过设定的现在，就还是用 file-loader来处理。
css-loader用于处理js中引入的css。 style-loader用于创建style标签的（这俩基本上也都得一起用）。
node-sass，它允许您以令人难以置信的速度将 .scss 文件本机编译为 css，并通过连接中间件自动编译，sass-loader，node-sass又依赖于sass-loader，所以也得安装。

npm i --save-dev vue vue-loader url-loader style-loader css-loader node-sass node-sass

安装后的package

{
  "name": "test-build-project",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "devDependencies": {
    "css-loader": "^6.7.3",
    "node-sass": "^8.0.0",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "vue-loader": "^17.0.1",
    "webpack": "^5.76.1",
    "webpack-cli": "^5.0.1"
  },
  "scripts": {
    "build": "node ./config/build.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.2.47"
  }
}

在目录中新增APP.vue、HelloWorld.vue、common.scss用于测试

前端怎么搭建chatgpt 前端如何搭建项目_webpack_04

更改index.js入口文件

import { createApp } from 'vue'; //引入vue
import App from './components/App.vue'; //测试处理.vue后缀
import './style/common.scss'; //测试scss

const app = createApp(App)
app.mount('#app');

App.vue

<template>
  <div class="center">
    <HelloWorld msg="Welcome to Electron+Vue3 App" />
  </div>
</template>

<script>
import HelloWorld from "./HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

<style lang="scss">
.center {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

HelloWorld.vue

<template>
  <div class="hello-world">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

<style lang="scss">
$nav-color: #f90;
h1 {
  color: $nav-color;
}

.hello-world {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
</style>

common.scss

body {
  background: #000428; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #004e92,
    #000428
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #004e92,
    #000428
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  margin: 0;
  padding: 0;
}

好再次执行npm run build打包，得到了新的打包文件

前端怎么搭建chatgpt 前端如何搭建项目_webpack_05

再次直接打开index.html

前端怎么搭建chatgpt 前端如何搭建项目_前端_06

这里就成功了

前端怎么搭建chatgpt 前端如何搭建项目_webpack_07

三、集成typescript

1、安装typescript、和ts-loader用于webpack支持。

npm install typescript ts-loader -D

{
  "name": "test-build-project",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "devDependencies": {
    "css-loader": "^6.7.3",
    "node-sass": "^8.0.0",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.5",
    "url-loader": "^4.1.1",
    "vue-loader": "^17.0.1",
    "webpack": "^5.76.1",
    "webpack-cli": "^5.0.1"
  },
  "scripts": {
    "build": "node ./config/build.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.2.47"
  }
}

2、生成tsconfig.json

npx tsc --init

这里tsconfig.json我完全没有更改，使用默认配置

3、创建shims-vue.d.ts文件

declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const componentOptions: ComponentOptions
    export default componentOptions
}

4、webpack中添加ts的loader

{ test: /\.ts$/, exclude: /node_modules/, use: ['ts-loader'] }

const path = require("path");//nodejs里面的基本包，用来处理路径
const { VueLoaderPlugin } = require('vue-loader') //这个是vue-loader自带的

module.exports = {
    entry: "./src/index.ts",
    output: {
        path: path.join(__dirname, 'dist'),
        filename: "bundle.js"
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',//https://github.com/vuejs/vue-style-loader/issues/42
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                            name: './font/[hash].[ext]',
                            publicPath: 'dist'
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            },
            //增加ts后缀的解析
            { test: /\.ts$/, exclude: /node_modules/, use: ['ts-loader'] }
        ]
    },
    //配置模块化引入文件的缺省类型
    // resolve: {
    //     extensions: ['.js', '.ts']
    // },
};

5、讲vue的入口文件改为index.ts

6、在执行npm run build，又生成了新的bundle.js

前端怎么搭建chatgpt 前端如何搭建项目_webpack_08