新建一个vue-cli@3 项目,并使用And Design Vue和Element组件库

1、要创建Vue3项目,首先自己电脑中要安装配置好node,cnpm,vue;
在这里插入图片描述
2、新建项目命令为:vue create 项目名称
3、项目新建成功以后,使用命令npm run serve运行项目
在这里插入图片描述

4、一般使用vue都会配合ant design vue或者element组件库来使用,网址分别为Ant Design VueElement
5、若使用ant design vue,要先npm i --save ant-design-vue
6、然后在main.js中做一定的修改,使全局都可以使用ant design vue中的所有组件,,在对应位置添加下面语句就可以了。

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);

原始的main.js如下:
在这里插入图片描述
修改后的main.js
在这里插入图片描述

7、使用element要先npm i element-ui -S
8、同样对main.js做修改,添加下面的语句就可以了

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要生成一个好看的 Vue 项目,可以遵循以下步骤: 1. 使用 Vue CLI 创建项目 Vue CLI 是一个官方的脚手架工具,可以帮助我们快速创建一个基于 Vue项目。你可以使用以下命令安装 Vue CLI: ``` npm install -g @vue/cli ``` 然后使用以下命令创建项目: ``` vue create my-project ``` 2. 选择适合自己的 UI 组件Vue 项目中,UI 组件可以帮助我们快速构建出漂亮的页面。目前比较流行的 UI 组件Element UI、Ant Design VueVuetify 等。你可以根据自己的需求选择一个适合自己的 UI 组件。 以 Element UI 为例,你可以使用以下命令安装 Element UI: ``` npm install element-ui -S ``` 然后在 main.js 中引入 Element UI: ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 设计好看的页面 在设计页面时,我们可以借助一些设计工具来提高效率。比如 Sketch、Figma、Adobe XD 等工具。在设计时,可以参考一些现有的 UI 设计风格和规范,比如 Material Design、Ant Design 等。 4. 使用 CSS 预处理器 CSS 预处理器可以帮助我们更方便地编写 CSS,并且可以使我们的样式更加易于维护。目前比较流行的 CSS 预处理器有 Sass、Less 和 Stylus。你可以根据自己的习惯选择一个。 以 Sass 为例,你可以使用以下命令安装 Sass: ``` npm install node-sass sass-loader -D ``` 然后在 vue.config.js 中配置: ```javascript module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/styles/_variables.scss";` } } } } ``` 5. 优化性能 在大型 Vue 项目中,优化性能是非常重要的。我们可以采用以下一些方法来优化性能: - 使用路由懒加载 - 使用组件懒加载 - 使用 CDN 加载第三方 - 开启 Gzip 压缩 - 开启 Webpack 的 Tree Shaking 特性 以上是生成一个好看的 Vue 项目的一些基本步骤,希望能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值