Vue开发

原创

已于 2024-11-07 17:10:11 修改 · 685 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-10-25 16:03:01 首次发布

新建 Vue 项目(方法1)

vue create project_name

按照自己的需求模块进行安装
在这里插入图片描述
选择安装 Router、Vuex 插件

选择 Vue3 版本

是否使用 history 模式的路由，按需选 Y 或者 n
在这里插入图片描述
后面的选项都默认即可

是否记住上面的选择项：否

总体配置
在这里插入图片描述

启动项目

cd demo_project
npm run serve

新建 Vue 项目(方法2)

npm init vue@latest

可以初始化 Pinia

在这里插入图片描述

启动项目

  cd rabbit
  npm install
  npm run dev

src 目录样例

在这里插入图片描述

别名路径

在 Vue 3 项目中，使用别名路径可以使代码更清晰，尤其是在导入模块时。
在这里插入图片描述

配置方法：在根目录下新增 jsconfig.json 或 tsconfig.json

{
   
   
  "compilerOptions": {
   
   
    "baseUrl": "./",
    "paths": {
   
   
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

引入 element-plus

安装

npm install element-plus --save

考虑到项目性能，一般采用按需导入

npm install -D unplugin-vue-components unplugin-auto-import

-D 或 --save-dev 参数表示：将安装的依赖包添加到 devDependencies 部分。这通常用于开发时需要的工具和库，例如测试框架、构建工具等，而不是在生产环境中运行的代码。
在这里插入图片描述
自动按需引入：使用的时候，自动导入相关组件

element-plus 主题色定制

Element Plus 是一个流行的 Vue 3 组件库，它允许定制主题色。开发者可以根据项目的需求和个人的喜好选择合适的方式来定制主题色
在这里插入图片描述
准备定制文件

样式覆盖

最低0.47元/天解锁文章