重庆长寿网站建设新手学做网站要学什么知识图文教程

重庆长寿网站建设,新手学做网站要学什么知识图文教程,企业网站备案需要什么,全部汅api免费下载欢迎你引言#xff1a;在前端开发领域#xff0c;Vue.js凭借其轻量、易用、渐进式的特性#xff0c;成为众多开发者构建单页应用#xff08;SPA#xff09;的首选框架。无论是个人项目还是企业级应用#xff0c;一套规范的设计思路和搭建流程#xff0c;都能极大提升开发效率、…引言在前端开发领域Vue.js凭借其轻量、易用、渐进式的特性成为众多开发者构建单页应用SPA的首选框架。无论是个人项目还是企业级应用一套规范的设计思路和搭建流程都能极大提升开发效率、降低后期维护成本。本文将带你从项目设计理念出发一步步完成Vue项目的搭建与基础配置助力你快速上手Vue项目开发。一、项目设计前期明确核心需求与技术选型在动手搭建项目前切勿急于敲代码先做好前期规划是项目成功的关键。这一阶段主要需要明确两个核心问题需求边界和技术栈选型。1. 需求梳理与架构设计首先要清晰梳理项目的核心功能的功能比如是后台管理系统、移动端H5、还是PC端官网不同的场景对技术的要求不同。例如后台管理系统更注重权限控制、数据表格、表单验证等功能移动端H5则需要考虑适配、性能优化、手势交互等问题。其次进行简单的架构设计确定项目的目录结构规范、状态管理方案、路由设计、接口请求方案等。建议采用模块化、组件化的设计思想将项目拆分为多个独立的功能模块便于后期维护和功能扩展。2. 技术栈选型基于Vue生态结合项目需求选择合适的技术栈核心框架Vue 3推荐支持Composition API、更好的TypeScript支持、性能更优构建工具Vite替代Webpack启动速度更快、热更新更高效路由管理Vue RouterVue官方路由插件处理页面跳转、路由守卫等状态管理PiniaVue官方推荐替代VuexAPI更简洁、支持TypeScript、无需嵌套模块UI组件库根据场景选择比如Element PlusPC端后台管理、Vant移动端、Ant Design Vue企业级应用HTTP请求Axios处理接口请求、拦截器、请求响应封装类型检查TypeScript增强代码可读性、减少运行时错误样式解决方案Scss/SassCSS预处理器支持变量、混合、嵌套等、CSS Modules避免样式冲突代码规范ESLint代码语法检查、Prettier代码格式化二、项目搭建从环境准备到基础初始化本章节以“Vue 3 Vite TypeScript Pinia Axios Element Plus”技术栈为例详细讲解项目的搭建过程。1. 环境准备首先确保本地安装了Node.js和npm/yarn/pnpm推荐使用pnpm速度更快、占用空间更小Node.js版本需≥14.18.0Vite的最低要求可通过Node.js官网下载安装pnpm安装命令npm install -g pnpm验证安装成功node -v # 输出Node.js版本号 pnpm -v # 输出pnpm版本号2. 初始化Vite Vue项目使用Vite官方脚手架初始化项目执行以下命令pnpm create vitelatest vue-project-demo --template vue-ts命令说明create vitelatest创建最新版本的Vite项目vue-project-demo项目名称可自定义--template vue-ts指定模板为Vue TypeScript执行命令后根据提示完成项目创建然后进入项目目录并安装依赖cd vue-project-demo # 进入项目目录 pnpm install # 安装项目依赖启动项目pnpm dev启动成功后访问终端提示的地址默认是http://127.0.0.1:5173/即可看到Vite Vue的默认页面。3. 项目目录结构优化Vite初始化后的目录结构比较简单我们需要根据项目规范进行优化使其更符合模块化开发需求。优化后的目录结构如下vue-project-demo/ ├── public/ # 静态资源不会被Vite处理 ├── src/ │ ├── api/ # 接口请求封装接口定义、请求函数 │ ├── assets/ # 静态资源会被Vite处理如图片、字体、全局样式 │ │ ├── icons/ # 图标资源 │ │ ├── images/ # 图片资源 │ │ └── styles/ # 全局样式如重置样式、变量定义 │ ├── components/ # 公共组件全局复用的组件如Button、Table │ │ ├── base/ # 基础组件最原子化的组件 │ │ └── business/ # 业务组件结合具体业务的组件 │ ├── composables/ # 组合式函数Vue 3 Composition API复用逻辑 │ ├── layouts/ # 布局组件如后台管理系统的Sidebar、Header、MainLayout │ ├── router/ # 路由配置路由规则、路由守卫 │ ├── stores/ # Pinia状态管理各个模块的Store │ ├── types/ # TypeScript类型定义接口类型、全局类型 │ ├── utils/ # 工具函数如时间格式化、权限判断、请求工具 │ ├── views/ # 页面组件对应路由的页面 │ │ ├── Home/ # 首页 │ │ └── Login/ # 登录页 │ ├── App.vue # 根组件 │ ├── main.ts # 入口文件 │ └── vite-env.d.ts # Vite环境类型声明 ├── .eslintrc.cjs # ESLint配置文件 ├── .prettierrc.cjs # Prettier配置文件 ├── index.html # 入口HTML文件 ├── package.json # 项目依赖和脚本配置 ├── tsconfig.json # TypeScript配置文件 ├── tsconfig.node.json # Node.js环境TypeScript配置 └── vite.config.ts # Vite配置文件三、核心配置打造规范、高效的开发环境项目搭建完成后需要进行一系列核心配置包括Vite配置、路由配置、Pinia状态管理配置、Axios请求封装、UI组件库引入等为后续开发奠定基础。1. Vite配置优化vite.config.tsVite的默认配置可能无法满足项目需求我们需要对其进行扩展比如配置别名、跨域代理、全局样式、插件等。示例配置如下import { defineConfig } from vite import vue from vitejs/plugin-vue import path from path // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], // 配置路径别名 resolve: { alias: { : path.resolve(__dirname, ./src) // 用代替src目录 } }, // 开发服务器配置跨域代理 server: { port: 5173, // 开发端口 open: true, // 启动后自动打开浏览器 proxy: { // 配置接口代理解决跨域问题 /api: { target: http://localhost:3000, // 后端接口地址 changeOrigin: true, // 允许跨域 rewrite: (path) path.replace(/^\/api/, ) // 重写路径去掉/api前缀 } } }, // CSS配置 css: { preprocessorOptions: { scss: { // 全局引入scss变量文件 additionalData: import /assets/styles/variables.scss; } } } })2. 路由配置src/router/index.ts使用Vue Router配置项目路由包括路由规则、路由守卫如登录验证等。首先安装Vue Routerpnpm install vue-router4 # Vue 3对应Vue Router 4版本然后创建路由配置文件import { createRouter, createWebHistory, RouteRecordRaw } from vue-router import MainLayout from /layouts/MainLayout.vue import HomeView from /views/Home/HomeView.vue import LoginView from /views/Login/LoginView.vue import { useUserStore } from /stores/user // 路由规则 const routes: RouteRecordRaw[] [ { path: /login, name: Login, component: LoginView, meta: { requiresAuth: false // 不需要登录验证 } }, { path: /, component: MainLayout, meta: { requiresAuth: true // 需要登录验证 }, children: [ { path: , name: Home, component: HomeView }, // 其他页面路由... ] } ] // 创建路由实例 const router createRouter({ history: createWebHistory(import.meta.env.BASE_URL), // 历史模式 routes }) // 路由守卫验证登录状态 router.beforeEach((to, from, next) { const userStore useUserStore() const requiresAuth to.meta.requiresAuth if (requiresAuth !userStore.token) { // 未登录跳转到登录页 next(/login) } else { next() } }) export default router最后在入口文件main.ts中引入路由import { createApp } from vue import App from ./App.vue import router from ./router import { createPinia } from pinia const app createApp(App) app.use(createPinia()) app.use(router) app.mount(#app)3. Pinia状态管理配置src/stores/user.tsPinia是Vue 3官方推荐的状态管理工具使用起来比Vuex更简洁。首先安装Piniapnpm install pinia然后创建用户模块的Store示例import { defineStore } from pinia import { loginApi } from /api/user // 定义User类型 interface UserState { token: string | null username: string | null roles: string[] } // 创建Store export const useUserStore defineStore(user, { // 状态 state: (): UserState ({ token: localStorage.getItem(token), // 从本地存储获取token username: localStorage.getItem(username), roles: [] }), // 计算属性 getters: { isLogin: (state) !!state.token // 判断是否登录 }, // 方法同步/异步 actions: { // 登录动作 async login(data: { username: string; password: string }) { const res await loginApi(data) const { token, username, roles } res.data // 更新状态 this.token token this.username username this.roles roles // 本地存储持久化 localStorage.setItem(token, token) localStorage.setItem(username, username) }, // 退出登录 logout() { this.token null this.username null this.roles [] localStorage.clear() } } })4. Axios请求封装src/utils/request.tsAxios是处理HTTP请求的常用工具我们需要对其进行封装统一处理请求拦截、响应拦截、错误处理等。首先安装Axiospnpm install axios然后创建请求工具文件import axios from axios import { ElMessage } from element-plus import { useUserStore } from /stores/user // 创建Axios实例 const service axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, // 从环境变量获取基础地址 timeout: 5000 // 请求超时时间 }) // 请求拦截器添加token service.interceptors.request.use( (config) { const userStore useUserStore() if (userStore.token) { config.headers.Authorization Bearer ${userStore.token} // 携带token } return config }, (error) { // 请求错误处理 ElMessage.error(请求发送失败) return Promise.reject(error) } ) // 响应拦截器统一处理响应数据和错误 service.interceptors.response.use( (response) { const res response.data // 假设后端约定code200表示成功 if (res.code ! 200) { ElMessage.error(res.msg || 请求失败) return Promise.reject(res) } return res }, (error) { // 处理401未授权token过期 if (error.response?.status 401) { const userStore useUserStore() userStore.logout() // 退出登录 window.location.href /login // 跳转到登录页 ElMessage.error(登录已过期请重新登录) } else { ElMessage.error(error.msg || 服务器错误) } return Promise.reject(error) } ) export default service然后在api目录下创建接口请求函数示例src/api/user.tsimport request from /utils/request // 登录接口 export const loginApi (data: { username: string; password: string }) { return request({ url: /login, method: post, data }) } // 获取用户信息接口 export const getUserInfoApi () { return request({ url: /user/info, method: get }) }5. UI组件库引入Element Plus以Element Plus为例介绍UI组件库的引入方式推荐按需引入减少打包体积。首先安装Element Pluspnpm install element-plus element-plus/icons-vue然后在入口文件main.ts中全局引入样式按需引入组件需要配合插件import element-plus/dist/index.css // 引入Element Plus全局样式 import * as ElementPlusIconsVue from element-plus/icons-vue const app createApp(App) // 全局注册所有图标 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.mount(#app)如需按需引入组件可安装unplugin-vue-components插件在vite.config.ts中配置实现组件自动导入无需手动引入。四、项目开发规范提升代码质量与协作效率良好的开发规范是团队协作的基础也是保证项目可维护性的关键。以下是一些常用的开发规范建议1. 代码规范ESLint PrettierVite初始化项目时已自带ESLint配置我们可以根据项目需求修改.eslintrc.cjs和.prettierrc.cjs文件统一代码风格。例如// .eslintrc.cjs module.exports { root: true, env: { browser: true, es2021: true }, extends: [ eslint:recommended, plugin:vue/vue3-essential, plugin:typescript-eslint/recommended, plugin:prettier/recommended // 结合Prettier ], parser: vue-eslint-parser, parserOptions: { ecmaVersion: latest, parser: typescript-eslint/parser }, plugins: [vue, typescript-eslint], rules: { vue/multi-word-component-names: off, // 关闭组件名多单词校验根据项目需求 typescript-eslint/no-unused-vars: warn, // 未使用变量警告 prettier/prettier: error // Prettier格式错误报错 } }2. 组件实例代码templatediv classpageh1父组件/h1p接受子组件传递过来的数据:{{ msg }}/pp****************************************/pEmitChild changegetVal//div/templatescriptimport EmitChild from /components/EmitChild.vue;export default{data(){return{msg:}},components:{EmitChild},methods:{getVal:function(val){this.msgval}}}/scriptstyle scoped/style图片3. 目录规范严格按照优化后的目录结构存放文件避免文件乱放导致后期维护困难。例如静态资源放在assets目录工具函数放在utils目录接口请求放在api目录等。五、项目打包与部署项目开发完成后需要打包生成生产环境的代码然后部署到服务器。1. 打包配置在package.json中已自带打包脚本执行以下命令打包pnpm run build打包完成后会生成dist目录该目录下的文件即为生产环境的静态资源。2. 部署方式根据项目需求选择合适的部署方式静态服务器部署将dist目录下的文件上传到Nginx、Apache等静态服务器。云服务部署如阿里云OSS、腾讯云COS、Netlify、Vercel等支持一键部署。容器化部署使用Docker打包项目部署到Docker容器或K8s集群。以Nginx部署为例需要配置Nginx的location规则指向dist目录并处理SPA的路由问题避免刷新页面404server { listen 80; server_name your-domain.com; # 你的域名 location / { root /path/to/dist; # dist目录的绝对路径 index index.html; try_files $uri $uri/ /index.html; # 处理SPA路由 } }六、总结与拓展本文从项目设计前期的需求梳理、技术选型到项目搭建、核心配置再到开发规范、打包部署完整呈现了Vue项目从0到1的搭建流程。掌握这套流程后你可以快速搭建起一个规范、可扩展的Vue项目无论是个人开发还是团队协作都能游刃有余。