Mac快速搭建前端环境&创建前端项目【Vue】

NPE~2024-05-26 9:11

Mac快速搭建前端环境&创建前端项目

官网：

  1. vue：https://cn.vuejs.org/
  2. vue-router：https://www.axios-http.cn/
  3. pinia：https://pinia.vuejs.org/zh/getting-started.html
  4. axios：https://www.axios-http.cn/
  5. ant-design：https://www.antdv.com/

1 开发环境搭建

①安装node（nvm）

下载：https://nodejs.org/en

Mac可以安装配置nvm（管理node的工具）

bash 复制代码 
185.199.108.133  raw.githubusercontent.com
bash 复制代码 
### nvm安装及使用
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 配置环境变量
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

# 完成后输入nvm，出现node version manger表示安装成功
nvm

# 使用：
## 1 安装node( nvm ls-remote  | grep 18 查看有哪些node版本)
nvm install 13.0.1
## 2 查看是否安装成功
nvm list | grep 13
## 3 切换版本
nvm use 13.0.1

②配置npm

bash 复制代码 
# 配置npm
npm config set registry https://registry.npmmirror.com  #设置国内阿里云镜像源
npm config get registry  #查看镜像源

npm init： 项目初始化；
npm init -y：默认一路yes，不用挨个输入信息
npm install 包名：安装js包到项目中（仅当前项目有效）。指定 包名，或者 包名@版本号
npm install -g： 全局安装，所有都能用
可以去 npm仓库 搜索第三方库
npm update 包名：升级包到最新版本
npm uninstall 包名：卸载包
npm run：项目运行

③安装vite（脚手架）

vite：快速创建前端项目脚手架。包括react、vue等项目

官网：https://cn.vitejs.dev

bash 复制代码 
npm create vite #根据向导选择技术栈

npm install #安装项目所有依赖

npm install axios #安装指定依赖到当前项目
npm install -g xxx # 全局安装

# 项目启动
npm run dev #启动项目

# 项目打包
## 前后分离方式：需要把 dist 文件夹内容部署到如 nginx 之类的服务器上。
## 前后不分离方式：把 dist 文件夹内容复制到 SpringBoot 项目 resources 下面
npm run build #构建后 生成 dist 文件夹

问题：如果出现报错：node:77305) Warning: require() of ES modules is not supported.，表明node版本过低不支持。通过nvm升级node版本即可。nvm use v18.20.2

④vue浏览器插件：Vue.js devtools

使用：

⑤VSCode/WebStorm

2 快速搭建简易登录页面

使用技术：vue+vue-router-pinia+axios+ant-design

官网：

  1. vue：https://cn.vuejs.org/
  2. vue-router：https://www.axios-http.cn/
  3. pinia：https://pinia.vuejs.org/zh/getting-started.html
  4. axios：https://www.axios-http.cn/
  5. ant-design：https://www.antdv.com/

🚀全部代码：https://github.com/ziyifast/ziyifast-code_instruction/tree/main/front_demo/vue/vue-all

2.1 创建vue项目

①vite创建vue基础项目
bash 复制代码 
# 创建vue项目
npm create vite
# 进入项目并安装依赖
cd vue-all
npm install

# 启动项目
npm run dev
②引入ant-design
js 复制代码 
//安装依赖
npm i --save ant-design-vue@4.x

//main.js中注册使用
import { createApp } from 'vue';
import App from './App';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App);

app.use(Antd).mount('#app');

2.2 使用ant-design快速搭建页面

①vue及路由配置
App.vue
js 复制代码 
<script>
</script>

<template>
  <div>
    <router-view/>
  </div>
</template>

<style scoped>
</style>
views/LoginVue.vue
go 复制代码 
<script>
import {login} from "@/api/user.js";
export default {
  data() {
    return {
      loginUser: {
        username: 'admin',
        password: 'admin',
      },
    };
  },
  methods: {
    userLogin(){
      login(this.loginUser).then(res => {
        console.log(res.status)
        if(res.status === 200){
          alert('登录成功')
          this.$router.push({path: `/userInfo/`})
        }
      }, error => {
        alert('登录失败')
      })
    }


  },
}
</script>

<template>
  <div class="loginContainer">
    <div class="loginHeader">
      <span style="color: #2b92e4">ziyi后台管理系统</span>
    </div>
    <div class="loginMainWrapper">
      <div class="loginWrapper">
        <div class="loginTipsWrapper" style="color: #ffffff">
          <span class="siteSummaryTitle">ziy后台管理系统</span>
          <div class="siteSummary">
            <ul>
              <li>
                <a-icon type="check-square" style="margin-right: 10px"/>
                <span>统一方便的资源管理</span></li>
              <li>
                <a-icon type="check-square" style="margin-right: 10px"/>
                <span>友好的界面展示，基于AntDesign组件库</span></li>
              <li>
                <a-icon type="check-square" style="margin-right: 10px"/>
                <span>前后端分离，便于维护</span></li>
            </ul>
          </div>
        </div>
        <div class="loginBoxWrapper" align="center">
          <a-form-model :model="loginUser" style="width: 100%">
            <a-form-model-item style="color: palevioletred;text-align: center">
              <h1>欢迎登录</h1>
            </a-form-model-item>
            <a-form-model-item>
              <a-input v-model:value="loginUser.username" placeholder="账号">
                <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-input v-model:value="loginUser.password" type="password" placeholder="密码">
                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" html-type="submit" style="width: 100%" @submit.prevent
                        @click="userLogin">立即登录
              </a-button>
              <a-button style="width: 100%;margin-top: 10px">注册账号</a-button>
            </a-form-model-item>
            <a-form-model-item style="text-align: center">
              <a-space size="large">
                <a-icon type="weibo" style="font-size: 2em;cursor: pointer;color:#f50"/>
                <a-icon type="qq" style="font-size: 2em;cursor: pointer;color:#2b92e4;"/>
                <a-icon type="github" style="font-size: 2em;cursor: pointer;color:#333;"/>
              </a-space>
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
      <div class="loginFooter">
        © 2020-2024 CoreCmd 版权所有. 川ICP备18063315号-1 川公网安备 52158202001416号
      </div>
    </div>
  </div>
</template>

<style scoped>
.loginContainer {
  width: 100%;
  position: relative;
  background-attachment: fixed;
  background-repeat: no-repeat !important;
  background-size: cover;
  background-position: center;
  padding-top: 105px;
  min-height: 100%;
}

.loginHeader {
  width: 100%;
  height: 64px;
  background-color: #ffffff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  padding: 10px;
}

.loginHeader span {
  font-size: 25px;
  font-weight: 700;
}

.loginMainWrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}

.loginWrapper {
  width: 90%;
  display: flex;
  align-items: flex-start;
  justify-content: right;
  flex-direction: row;
  height: 100%;
}

.loginFooter {
  width: 100%;
  min-height: 64px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row;
  text-align: center;
  color: #ffffff;
  margin-top: 40px;
}

.siteSummary ul {
  list-style: none;
  padding: 0;
}

.siteSummary ul li {
  margin-top: 10px;
  list-style: none;
}

@media screen and (min-width: 1200px) {
  .loginTipsWrapper {
    padding: 20px 30px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    min-height: 100%;
  }

  .loginBoxWrapper {
    background-color: #ffffff;
    padding: 20px;
    width: 400px;
    height: 100%;
    border-radius: 5px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  .loginTipsWrapper {
    padding: 20px 30px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    height: 100%;
  }

  .loginBoxWrapper {
    background-color: #ffffff;
    padding: 20px;
    width: 400px;
    height: 100%;
    border-radius: 5px;
  }
}

@media screen and (max-width: 768px) {
  .loginTipsWrapper {
    display: none;
  }

  .loginBoxWrapper {
    background-color: #ffffff;
    padding: 20px;
    width: 100%;
    border-radius: 5px;
  }
}

.siteSummaryTitle {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
}

.siteSummary {
  margin-top: 25px;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 300;
}
</style>
views/UserInfo.vue
go 复制代码 
<script setup>

</script>

<template>
  <h1>用户中心</h1>
</template>

<style scoped>

</style>
router/index.js
js 复制代码 
import {createRouter, createWebHistory} from 'vue-router'
import UserInfo from "@/views/UserInfo.vue";
import LoginVue from "@/views/LoginVue.vue";

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/', //默认展示登录页面
            name: 'login',
            component: LoginVue,
        },
        {
            path: '/userInfo',
            name: 'userInfo',
            component: UserInfo,
        }
    ]
})

export default router
②封装axios（util/http.js）
js 复制代码 
import axios from "axios";

//封装请求
const http = axios.create({
    baseURL: '/api',
    timeout: 5000,
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    },
    withCredentials:true, //允许跨域
});


function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        http.get(url, {
            params: params
        }).then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err.data)
        })
    })
}

function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        http.post(url, data)
            .then(response => {
                resolve(response.data);
            })
            .catch(err => {
                reject(err)
            })
    })
}

export default http;
③user.js
javascript 复制代码 
import http from '../utils/http.js'

export const login = (params) => http.post(`/login`, params)

2.4 vite.config.js解决跨域

js 复制代码 
import {fileURLToPath, URL} from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    //配置代理
    server: {
        proxy: {
            '/api': {
                target: 'http://localhost:8080', // 后端服务器地址
                changeOrigin: true, // 是否改变请求域名
                rewrite: (path) => path.replace(/^\/api/, '')//将原有请求路径中的api替换为''
            }
        }
    }
})

2.4 后端接口（Golang版）

为了代码简洁，这里直接使用硬编码，不再进行连接查询数据库等操作

go 复制代码 
package main

import (
	"fmt"
	"github.com/kataras/iris/v12"
	"github.com/kataras/iris/v12/context"
	"net/http"
)

func main() {
	app := iris.New()
	app.Use(Cors)
	app.Post("/login", login())
	app.Listen(":8080")
}

func login() func(ctx *context.Context) {
	return func(ctx *context.Context) {
		tmp := make(map[string]interface{})
		err := ctx.ReadJSON(&tmp)
		if err != nil {
			ctx.StatusCode(http.StatusBadRequest)
			return
		}
		username := tmp["username"]
		password := tmp["password"]
		fmt.Println("username:", username, "password:", password)
		if username == "admin" && password == "admin" {
			ctx.StatusCode(http.StatusOK)
			return
		} else {
			ctx.StatusCode(http.StatusForbidden)
			return
		}
	}
}

func Cors(ctx iris.Context) {
	//后端解决跨域
	ctx.Header("Access-Control-Allow-Origin", "*")
	if ctx.Method() == "OPTIONS" {
		ctx.Header("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,PATCH,OPTIONS")
		ctx.Header("Access-Control-Allow-Headers", "Content-Type, Accept, Authorization")
		ctx.StatusCode(204)
		return
	}
	ctx.Next()
}

2.5 测试

①启动项目
bash 复制代码 
# 在package.json目录下执行命令，运行前端
npm run dev

# 启动后端
go run main.go

前端：

后端：

②验证
  1. 访问浏览器
  2. 点击登录按钮，请求后端
  3. 登录成功，跳转用户中心页面
相关推荐
Paulloo7 分钟前
分享一个Chrome插件 倒计时功能
前端
HaiJunYa17 分钟前
mac Canon打印机连接教程
macos·打印·扫描·canon打印机
顶顶年华正版软件官方17 分钟前
Mac可以卸载掉系统自带的软件吗 Mac第三方软件无法卸载是为什么
macos·笔记本电脑·终端·mac卸载系统软件
省点时间Mac站18 分钟前
【Mac】A Better Finder Attributes（文件批量重命名工具）
macos
GaoJamie19 分钟前
macOS如何查看终端的shell类型
macos·终端·shell
良枫24 分钟前
macOS 安装redis
macos
程序员微木27 分钟前
【ajax实战08】分页功能
前端·javascript·ajax
突然暴富的我28 分钟前
安装node软件 文件夹里没有node_modules 包 是怎么回事
前端·vue.js·elementui
呆呆加油呀30 分钟前
vue为啥监听不了@scroll
前端·javascript·vue.js
叫我小鹏呀30 分钟前
小程序web-view无法打开该页面的解决方法
前端·微信小程序·小程序
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）03【经验分享】Ubuntu22.04安装微信(linux官方版)04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）052025张宇考研数学，百度网盘视频课+36讲PDF讲义+真题06【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解0751-2 万字长文，深度解读端到端自动驾驶的挑战和前沿08通达信神奇九转指标原理及选股公式，无未来函数，数字不消失09浏览器插件——ModHeader 的分享和学习10＜工控＞＜PLC＞汇川Easy521系列PLC与汇川SV630N伺服进行EtherCat通讯的相关配置及指令编写