一、前言
上一章对我的个人博客项目前端所用到的技术栈大概说了一下，也说了一下自己对所用技术的当前水准，总结一下就是没得水准，可能还没有入门，本章将对前端项目进行创建。
二、创建vite+vue项目
gitee创建前端项目
老规矩，gitee而不是GitHub，一个是因为需要科学上网工具，在一个是也没用过GitHub，全英文难受得很
直接贴图了，不会的老铁建议翻一下专栏个人博客前面的章节
git clone https://gitee.com/andaning/blog-vue.git 复制代码
网络异常，图片无法展示
|
node.js选择
node版本检查命令
node -v 复制代码
初始化项目
使用npm， 如果是使用的nodejs 14.19.0版本的使用以下命令
npm init @vitejs/app 输入项目名 选择vue 因为我们是TypeScript项目，最后一个选择vue-ts而不是vue 复制代码
网络异常，图片无法展示
|
如果nodejs版本是最新稳定版16.16.0的， 创建项目命令变为
npm init vite 输入项目名 选择vue 因为我们是TypeScript项目，最后一个选择vue-ts而不是vue 复制代码
网络异常，图片无法展示
|
进入我们生成的项目 blog-vue目录之后，进入cmd界面输入以下命令拉取依赖
npm install 复制代码
网络异常，图片无法展示
|
网络异常，图片无法展示
|
依赖下载完毕之后输入以下命令来启动我们的项目
npm run dex 复制代码
项目启动之后会进入以下界面，输入 http://127.0.0.1:5173/ 进入项目的首页
网络异常，图片无法展示
|
三、修改Vite配置文件
进入项目根目录 vite.config.ts 文件，设置 @指向 src目录，服务启动端口，打包路径、代理等，详情可查看Vite官网
网络异常，图片无法展示
|
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D import { resolve } from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录 } }, base: './', // 设置打包路径 server: { port: 7685, // 设置服务启动端口号 open: true, // 设置服务启动时是否自动打开浏览器 cors: true // 允许跨域 // 设置代理，根据我们项目实际情况配置 // proxy: { // '/api': { // target: 'http://xxx.xxx.xxx.xxx:8000', // changeOrigin: true, // secure: false, // rewrite: (path) => path.replace('/api/', '/') // } // } } }) 复制代码
四、目录结构
├── publish/ └── src/ ├── assets/ // 静态资源目录 ├── common/ // 通用类库目录 ├── components/ // 公共组件目录 ├── router/ // 路由配置目录 ├── store/ // 状态管理目录 ├── style/ // 通用 CSS 目录 ├── utils/ // 工具函数目录 ├── views/ // 页面组件目录 ├── App.vue ├── main.ts ├── shims-vue.d.ts ├── index.html ├── tsconfig.json // TypeScript 配置文件 ├── vite.config.ts // Vite 配置文件 └── package.json 复制代码
五、集成相关工具
集成vue-router
输入以下命令集成vue-router,vue-router官网
npm install vue-router@4 复制代码
在src下建立router文件夹，并在该文件夹下创建 index.ts文件
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' import Home from '@/page/backStage/home/home.vue' const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: Home }, { path: '/axios', name: 'Axios', component: () => import('@/views/axios.vue') // 懒加载组件 } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router 复制代码
引入配置文件
import { createApp } from 'vue' import './style.css' import App from './App.vue' import router from './router/index' createApp(App) .use(router) .mount('#app') 复制代码
安装Vuex
输入以下命令安装vuex
npm i vuex@next 复制代码
创建 src/store/index.ts 文件
import { createStore } from 'vuex' const defaultState = { count: 0 } // Create a new store instance. export default createStore({ state() { return defaultState }, mutations: { increment(state: typeof defaultState) { state.count++ } }, actions: { increment(context) { context.commit('increment') } }, getters: { double(state: typeof defaultState) { return 2 * state.count } } }) 复制代码
引入配置文件
import { createApp } from 'vue' import './style.css' import App from './App.vue' import store from './store/index' createApp(App) .use(store) .mount('#app') 复制代码
安装http工具axios
输入以下命令安装axios
npm i axios 复制代码
配置axios
import Axios from 'axios' import { ElMessage } from 'element-plus' const baseURL = 'https://api.github.com' const axios = Axios.create({ baseURL, timeout: 20000 // 请求超时 20s }) // 前置拦截器（发起请求之前的拦截） axios.interceptors.request.use( (response) => { /** * 根据你的项目实际情况来对 config 做处理 * 这里对 config 不做任何处理，直接返回 */ return response }, (error) => { return Promise.reject(error) } ) // 后置拦截器（获取到响应时的拦截） axios.interceptors.response.use( (response) => { /** * 根据你的项目实际情况来对 response 和 error 做处理 * 这里对 response 和 error 不做任何处理，直接返回 */ return response }, (error) => { if (error.response && error.response.data) { const code = error.response.status const msg = error.response.data.message ElMessage.error(`Code: ${code}, Message: ${msg}`) console.error(`[Axios Error]`, error.response) } else { ElMessage.error(`${error}`) } return Promise.reject(error) } ) export default axios 复制代码
引入element plus
输入以下命令引入element plus
npm i element-plus 复制代码
配置element plus
import { createApp } from 'vue' import './style.css' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' createApp(App) .use(ElementPlus) .mount('#app') 复制代码
总结
到此个人博客项目的前端页面初始化就完成了，运行正常
网络异常，图片无法展示
|
