新手如何从零开始搭建自己的博客系统： 后台管理-VUE3项目搭建

熟悉的朋友都知道，截止目前vue3已经发布有两年半时间了，但是市面上老的项目可能还是以vue2为主，新的项目可能就以vue3为主了，像我们公司应该说绝大部分都是老项目，所有未来很长一段时间都不会进行升级，因为对于一个项目来说稳定是很重要的。

对于前后端的新手朋友来说，创建一个项目是进行开发的第一步，项目的搭建很重要，因为创建之初就需要确定好框架跟技术栈，后续如果再来修改框架的话无论是对于公司还是个人都是一件费时费力的事情。

本教程的前端技术栈：vue3.x/ typescript / vue-router / pina / element-plus / axios

后续可能用到的插件：wangeditor / echarts

电脑运行环境：node16

开发工具: vscode

为了避免版本不一致导致过程中可能出现的奇怪问题，请大家尽量保持统一，或者尽可能接近。

• 创建根目录，在你的电脑新建一个文件夹用来保存项目代码，然后在当前根目录下打开终端（windows下打开cmd程序），然后执行一下命令：

 npm init vue@latest

这个指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

dddeMacBook-Pro:vue3 dd$ npm init vue@latest
Need to install the following packages:
  create-vue@3.6.4
Ok to proceed? (y) 
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'create-vue@3.6.4',
npm WARN EBADENGINE   required: { node: '>=v16.20.0' },
npm WARN EBADENGINE   current: { node: 'v16.19.1', npm: '8.19.3' }
npm WARN EBADENGINE }

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-project
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in /Users/dd/Downloads/vue3/vue-project...

Done. Now run:

  cd vue-project
  npm install
  npm run format
  npm run dev

如果执行过程中未出错你将能看到如下执行过程，主要是选择项目的一些基础信息，接下来分别说明下这些选项的含义。

Project name: … vue-project

项目名称，一个好的名称可能能让人很快的记住你，甚至可以为以后的商业化做准备，比如项目可以加上一些关键字像dsiab.com_vue3。

Add TypeScript? … No / Yes

是否需要添加typescript，我这里选择是，因为typescript的目的就是为了让代码书写的更规范或者说更严格，目前已经是一个项目的标准配置了，如果你是单兵作战可能体会不深，但是如果你的团队有超过三个人，那么typescipt的优点将会得到很好的体现，当然缺点也会暴露的一览无遗，typescript的缺点毫无疑问就是繁琐，如果你忍受不了这个缺点，那么你可以不选择这一项，去掉对项目开发没有一点影响。

Add JSX Support? … No / Yes

是否要添加jsx语法支持，这里我选择是，或许会用到，谁知道呢。

Add Vue Router for Single Page Application development? … No / Yes

是否需要添加vue-router，当然需要。

Add Pinia for state management? … No / Yes

是否需要添加vuex，当然需要，要注意的是vuex是vue2.0的叫法，3.x改名为pinia了。

Add Vitest for Unit Testing? … No / Yes

是否需要添加单元测试，我这里选择否，暂时不需要，以后如果有需要再添加也来得及。

Add an End-to-End Testing Solution? › No

是否需要添加端到端测试解决方案，同上，暂时不需要，原则上只要是你不熟悉的你就可以不添加，因为不知道后面可能出现什么问题。

Add ESLint for code quality? … No / Yes

是否需要添加eslint，我这里选择是，强烈建议大家都加上，因为这个插件的功能就是可以检测代码中不规范的部分。

Add Prettier for code formatting? … No / Yes

是否需要添加prettier插件用来格式化代码，强烈建议加上，不知道你有没有在写完代码后在去查看自己的代码，如果你看了可能会发现代码写的真的是龙飞凤舞，有了这个插件后能瞬间让你的代码成为模范标兵，程序员姐姐可能会瞬间爱上你哦。

此时你打开项目就能看到生成的一些文件了，接下来需要你在根目录下执行一下命令安装依赖：

npm config set registry=https://registry.npmmirror.com
npm install

如果安装报错请检查node版本是否一致。

第一行代码的意思是甚至下载源为国内的阿里镜像，速度快。

接下来添加一行端口配置为了大家运行后的项目端口保持一致。

在vite.config.ts文件中添加如下代码：

server: {
    host: "127.0.0.1",
    port: 7910,
    open: true, // 默认打开浏览器
  },

此时vite.config.ts文件内容如下：

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    host: "127.0.0.1",
    port: 7910,
    open: true, // 默认打开浏览器
  },
})

然后在根目录下执行以下命令技能看到项目正常运行了

npm run dev

当你的控制台出现以上提示时说明项目已经正常运行了，在浏览器地址栏输入 http://127.0.0.1:7910/ 该地址就能看到运行的项目了。

祝你好运。

本文章由javascript技术分享原创和收集