Vue-cli3.0项目整体框架及按需引入依赖步骤

1、vue-cli3.0搭建

1、安装nodejs
 百度自己下载https://nodejs.org/en/
2、安装cnpm(淘宝国内加速)
npm install -g cnpm --registry=https://registry.npm.taobao.org	

在这里插入图片描述

3、安装vue工具包
cnpm install -g @vue/cli

在这里插入图片描述
在这里插入图片描述

4、 创建项目(cmd到自己项目想产生的位置)
 (1)vue create xxxx(项目名不能大写)
 (2)勾选过程可上网搜索,未来得及截图     
5、 进入到项目根目录:启动项目
npm run serve

在这里插入图片描述
在这里插入图片描述

2、按需引入iview依赖

由于涉及到vue框架单网页应用首屏加载慢这个问题,我们需尽量减少加载负担,故采用按需引入的方式,只引入项目中用到的组件。

1、先安装iview
npm install iview -save

在这里插入图片描述

2、vue-cli3的命令vue ui
vue ui

在这里插入图片描述
可得到
在这里插入图片描述

3、打开添加插件
      搜索 vue-cli-plugin-iview

在这里插入图片描述
在这里插入图片描述
按需引入
在这里插入图片描述
按需加载安装后,vue-cli-plugin-iview会自动帮我们做好以下的配置:
babel.config.js
在这里插入图片描述
package.json
在这里插入图片描述
main.js

在这里插入图片描述
在目录下新增了plugin文件下有个iview.js
在这里插入图片描述
在iview中配置我们所用到的组件,如:
在这里插入图片描述

3、按需引入element-ui

1、在项目里输入
vue add element

在这里插入图片描述

2、勾选按需引入

在这里插入图片描述
在这里插入图片描述

3、系统自动配置

在这里插入图片描述
在这里插入图片描述

4、在element.js中修改,如

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐