搭建前端项目运行环境vue和react

方安乐

已于 2024-03-19 13:58:26 修改

阅读量237

点赞数

文章标签： vue.js 前端 javascript

于 2023-10-17 10:38:24 首次发布

本文链接：https://blog.csdn.net/yangguangxiadewo/article/details/133876862

版权

本文详细介绍了如何从零开始，通过npminit和vite一步步手动搭建Vue项目，包括配置vite.config.js、package.json和创建主入口文件。同时提及了vue-cli和webpack的作用。

摘要由CSDN通过智能技术生成

从零开始手动搭建运行环境

初始化项目

npm init

安装vite

npm install -D vite

安装vite后，如果不需要使用vue，可以直接新建一个html页面，执行npm run dev运行该页面

安装vue

npm install -D vue

安装完vue之后还不能直接在vite中使用，需要安装vite加载vue的插件

安装@vitejs/plugin-vue

npm install -D @vitejs/plugin-vue

配置vite.config.js

新建vite.config.js文件

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})

配置package.json

{
  "name": "my-test",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "...",
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.1.6"
  }
}

创建主入口文件

在根目录src文件夹下新建main.js文件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

添加App.vue

<script setup>
import homeView from './views/HomeView.vue'; 
</script>

<template>
  <div class="body">
    <homeView></homeView>
  </div>
</template>

<style scoped>
.body {
  width: 100%;
  height: 100%;
}
</style>

添加HomeView.vue

<script setup>
</script>

<template>
  <div class="body">
    nihao
  </div>
</template>

<style scoped>
.body {
  width: 100%;
  height: 100%;
}
</style>

添加主入口文件

在index.html里加载主入口文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rctInVue</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
</body>
</html>

一键快捷搭建vue项目

vue create project

使用vue-cli脚手架快捷搭建，通过@vue/cli实现的交互式的项目脚手架。

Vue CLI是一个基于vue.js进行快速开发的完整系统，基于webpack构建，并带有合理的默认配置。

脚手架创建的项目是基于webpack打包的。

npm init vue @latest

vue官方创建vue3项目的命令，搭建vue单页面应用，基于vite进行打包构建。

执行该命令会安装并运行vue-create，它是vue官方的项目脚手架工具。你将会看到诸如Typescript、测试支持之类的可选功能提示。

npm init vite-app 项目名

这样也可以

一键快捷搭建react项目

js npx

npx create-react-app rct-start

js npm

npm init react-app my-app

npx create-react-app rct-start-ts --template typescript

nextjs

npx create-next-app@latest

未完待续。。。

方安乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫