名称 最后更新
.vscode 正在载入提交数据...
public 正在载入提交数据...
src 正在载入提交数据...
.eslintrc.cjs 正在载入提交数据...
.gitignore 正在载入提交数据...
.prettierrc.json 正在载入提交数据...
README.md 正在载入提交数据...
index.html 正在载入提交数据...
jsconfig.json 正在载入提交数据...
package-lock.json 正在载入提交数据...
package.json 正在载入提交数据...
pnpm-lock.yaml 正在载入提交数据...
vite.config.js 正在载入提交数据...
yarn.lock 正在载入提交数据...

项目搭建

基于vite创建项目

# 使用npx创建项目
pnpm create vue PCMS

# 进入到项
cd PCMS

# 安装依赖
pnpm i

# 启动项目
pnpm dev 

image.png

调整项目目录结构

-src
  -apis           项目接口函数
  -assets         项目资源文件,比如,图片等
  -components     通用组件
  -pages          页面组件
  -store          集中状态管理
  -utils          工具,比如,token、axios 的封装等
  -view           页面组件

使用scss预处理器

SASS 是一种预编译的 CSS,支持一些比较高级的语法,可以提高编写样式的效率,接入scss非常简单只需要我们装一个sass工具

实现步骤

  1. 安装解析 sass 的包:npm i sass -D

配置别名路径

{ "compilerOptions": { "target": "ES6", "allowSyntheticDefaultImports": true, "baseUrl": "./", "paths": { "@/": [ "src/" ] } }, "exclude": [ "node_modules" ] }