个人博客（11、创建前端项目）

2022-12-20 258

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 个人博客（11、创建前端项目）

一、前言

上一章对我的个人博客项目前端所用到的技术栈大概说了一下，也说了一下自己对所用技术的当前水准，总结一下就是没得水准，可能还没有入门，本章将对前端项目进行创建。

二、创建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')
复制代码

总结

到此个人博客项目的前端页面初始化就完成了，运行正常

网络异常，图片无法展示

个人博客（11、创建前端项目）

一、前言

二、创建vite+vue项目

gitee创建前端项目

node.js选择

初始化项目

三、修改Vite配置文件

四、目录结构

五、集成相关工具

集成vue-router

安装Vuex

安装http工具axios

引入element plus

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景