项目搭建

环境准备

1. vscode
2. node
3. git

(vue3)项目搭建

1. vue项目创建

   • vue create是使用 Vue CLI 创建项目，提供了更多的项目配置选项， Webpack打包
     • 创建命令````
   • npm init vue自动创建一个新的Vue项目，并使用默认的预设安装所需的依赖，Vite打包工具
     • 创建命令： npm init vue@版本号
       • 创建最新版本的：npm init vue@latest
       • 创建3.0.0版本的：npm init vue@3.0.0

2. 下载必要的依赖

   • 下载element-plus

     • npm install element-plus --save

- 在main.js（入口文件）中引入 ```` import './assets/main.css' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' // element主题色 // import "@/styles/element/index.scss"; // 引入中文包 import zhCn from 'element-plus/dist/locale/zh-cn.mjs' import { createApp } from 'vue' import App from './App.vue' import router from './router'

   const app = createApp(App)
   
   app.use(router)
   app.use(ElementPlus, {
     locale: zhCn
   })
   app.mount('#app')
   
   ````

   

• 下载axios（请求）

  • npm install axios --save
  • 封装axios请求

3. 项目目录结构

   │  .browserslistrc
   │  .env.production
   │  .eslintrc.js // eslint配置文件
   │  .gitignore // git需要忽略的
   │  package-lock.json
   │  package.json
   │  README.md // 文档
   │  vite.config.js //vite配置文件
   ├─node_modules //依赖文件
   │
   │
   ├─public //不需要经过打包工具构建处理的静态资源
   │      favicon.ico // 页面图标
   │
   └─src
       ├─apis //接口文件根据页面或实例模块化
       │
       ├─assets // 静态资源文件
       │  └─images // 放静态图片
       │  └─svg   // 放svg图片
       │
       ├─components //全局公共组件(最好能再下分文件夹)
       │  └─header
       │          tabar.vue
       │
       ├─config //环境变量配置不同
       │      env.js
       │      index.js
       ├─layout  //页面框架
       ├─router  //路由配置文件
       │
       ├─views(pages) //页面文件
       │  ├─home //首页
       │  │  │
       │  │  ├─components // home产生的组件
       │  │  └─index.vue // 主页的vue文件
       │  │
       │  └─login //页面2（登录页）
       │
       ├─utils //常用工具函数(如封装的request)
       │
       ├─store //持久化仓库
       │
       └─styles //样式配置文件
   

4. 将项目与远程仓库关联(可省)

   • 初始化git

     git init

   • 将项目文件添加到本地仓库

     git add .

   • 提交项目文件到本地

     git commit -m "Initial commit"
     

   • 关联远程仓库

     git remote add origin [地址]
     

   • 推送到远程仓库 (force)

     git push -f origin master
     

5. 环境变量配置

   • 在根目录下面创建

     .env.development
     .env.production
     .env.test
     

6. 配置别名路径联想提示

   • vite配置文件中(vite.config.json)

     resolve: {
         alias: {
           '@': fileURLToPath(new URL('./src', import.meta.url))
         }
       }
     

7. 配置eslint和prettierrc

   • eslint 代码检查

     /* eslint-env node */
     require('@rushstack/eslint-patch/modern-module-resolution')
     
     module.exports = {
       root: true,
       extends: [
         'eslint:recommended',
         'plugin:vue/vue3-essential',
         // '@vue/eslint-config-prettier/skip-formatting',
         'plugin:prettier/recommended'
       ],
       parserOptions: {
         ecmaVersion: 'latest'
       },
       rules: {
         'no-var': 'error', // 要求使用 let 或 const 而不是 var
         'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
         'no-unexpected-multiline': 'error', // 禁止空余的多行
         'no-useless-escape': 'off', // 禁止不必要的转义字符
         'no-unused-vars': 'off',
         'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
         'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
         'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
         'vue/attribute-hyphenation': 'off' // 对模板中的自定义组件强制执行属性命名样式
       }
     }
     
     

   • prettierrc 代码格式化

     {
       "$schema": "https://json.schemastore.org/prettierrc",
       "semi": false,
       "tabWidth": 2,
       "singleQuote": true,
       "printWidth": 100,
       "trailingComma": "none",
       "bracketSpacing": true,
       "htmlWhitespaceSensitivity": "ignore",
       "endOfLine": "auto"
     }