浮光商城02-客户端初始化配置

客户端项目搭建

01. 创建vite项目

cd 项目根目录
yarn create vite

例如，我要把项目保存在~/Desktop/桌面的fuguang目录下，可以如下操作：

cd ~/Desktop/fuguang
yarn create vite

根据需要在生成项目时，我们选择对应的选项, 效果如下。

项目目录名称：fuguang_web

选项开发框架：vue 可以通过键盘方向键上（↑）下（↓）控制，回车键确认。

选择vue开发项目的前端语言：vue3

我们已经把vue项目构建好了，根据终端的提示，试着启动项目

cd fuguang_web
yarn
yarn dev

成功运行项目效果如下，

这里只是测试运行，成功之后就可以Ctrl+C停止项目并关闭终端了。

接着在pycharm下运行vue项目，查看效果。

在pycharm已经打开的服务端项目窗口左上角，File -> Open…

选择在一个新的窗口下打开客户端项目，这样的话，服务端项目在一个窗口下，客户端项目在另一个窗口下。

选择node解释器，配置启动项，运行项目。

打开浏览器访问：http://localost:3000。效果如下：

02. 删除默认文件

删除默认提供的 HelloWorld.vue 组件，

修改 src/APP.vue 中的默认样式和内容。

App.vue，代码：

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

<script setup>

</script>

<style>
/* 声明全局样式和项目的初始化样式 */
body,h1,h2,h3,h4,p,table,tr,td,ul,li,a,form,input,select,option,textarea{
  margin:0;
  padding: 0;
  font-size: 15px;
}
a{
  text-decoration: none;
  color: #333;
  cursor: pointer;
}
ul,li{
  list-style: none;
}
table{
  border-collapse: collapse; /* 合并边框 */
}
img{
  max-width: 100%;
  max-height: 100%;
}
input{
  outline: none;
}
</style>

接下来，我们可以查看效果了，一张白纸~

vite.config.js，有部分小伙伴的vite安装项目时因为版本原因，有可能不会自动生成vite配置文件，

所以如果没有的话，自己手动创建以下，补充以下，代码：

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

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

03. 下载路由组件

前面没有安装vue-router，使用以下命令在vue项目的根目录下安装路由组件：

cd ~/Desktop/luffycity/fuguang_web
yarn add vue-router@next

中文文档：https://next.router.vuejs.org/zh/

3.1 初始化路由对象

在 src 目录下新增 router 文件夹，创建index.js文件：

代码：

import {createRouter, createWebHistory} from 'vue-router'

// 路由列表
const routes = [

]

// 路由对象实例化
const router = createRouter({
  // history, 指定路由的模式
  history: createWebHistory(),
  // 路由列表
  routes,
});


// 暴露路由对象
export default router

在main.js文件，把router对象注册到vue项目中，代码：

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/index.js";
createApp(App).use(router).mount('#app')

04. 引入elementPlus

安装

cd ~/Desktop/luffycity/fuguang_web
yarn add element-plus
yarn add unplugin-vue-components

官方文档：https://element-plus.org/#/zh-CN

(配置elementPlus的功能组件按需导入)
https://element-plus.gitee.io/zh-CN/guide/quickstart.html

vite配置文件， fuguang_web/vite.config.js，加载上面刚安装的导入插件，代码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

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

05. 创建Home组件与Login组件

5.1 创建Home组件

views/Home.vue，代码：

<template>
  <h1>首页</h1>
  <el-row>
    <el-button round>圆角按钮</el-button>
    <el-button type="primary" round>主要按钮</el-button>
    <el-button type="success" round>成功按钮</el-button>
    <el-button type="info" round>信息按钮</el-button>
    <el-button type="warning" round>警告按钮</el-button>
    <el-button type="danger" round>危险按钮</el-button>
    <el-rate v-model="store.value2" :colors="store.colors"> </el-rate>
  </el-row>
</template>

<script setup>
import {reactive} from "vue";
const store = reactive({
  value2: null,
  colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
})
</script>

<style scoped>

</style>

5.2 创建Login组件

views/Login.vue，代码：

<template>
  <h1>登录</h1>
</template>

<script setup>

</script>

<style scoped>

</style>

5.3 配置路由

src/routers/index.js

import {createRouter, createWebHistory} from 'vue-router'

// 路由列表
const routes = [
  {
    meta:{
        title: "luffy2.0-站点首页",
        keepAlive: true
    },
    path: '/',         // uri访问地址
    name: "Home",
    component: ()=> import("../views/Home.vue")
  },
  {
    meta:{
        title: "luffy2.0-用户登录",
        keepAlive: true
    },
    path:'/login',      // uri访问地址
    name: "Login",
    component: ()=> import("../views/Login.vue")
  }
]

// 路由对象实例化
const router = createRouter({
  // history, 指定路由的模式
  history: createWebHistory(),
  // 路由列表
  routes,
});


// 暴露路由对象
export default router

5.4 查看效果图

访问浏览器，出现如下效果，则表示组件创建成功，elementPlus引入成功。