使用Vue-cli和NutUI快速撸一个Vue项目

最近接到一个紧急vue的h5项目，产品要求2天上线，虽然心里一万个神兽在奔跑 ，可是饭不能不吃，活不能不做，面对挑战我们要迎难而上，选对对的工具，让不可能变得可能。

下面这篇文章是我做完这个项目做的总结，2天开发时间意味着的开发测试是同时进行的，也就说尽量少出错，不出错，这就需要功能强大，打磨细腻的构建工具和组件库了，我选择的是 vue官网提供的vue-cli和nut-ui组件库，接下来是详细的使用介绍。

安装vue-cli

如果是 window电脑开发直接在npm中安装 npm install -g @vue/cli; 如果是 mac 开发sudo npm install -g @vue/cli;如果没有安装node，可以先现在node，注意 node版本目前要求在8.9以上, 然后通过 vue create xxx 创建一个项目，vue-cli初始化有一个选项，第一个是一个默认的配置，第二个是自定义配置，这里我没选择第一个配置就好。

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
复制代码

我们通过package.json可以看到有3个node启动命令，我们开发使用第一个。然后就是引入nutui组件库，我看了下官网提供了多种引入方式，如果项目特别紧急，火烧眉毛的这种建议简单粗暴~

首先下载NutNI

npm i @nutui/nutui -S
复制代码

然后找到main.js然后直接：

import NutUI from '@nutui/nutui';
import '@nutui/nutui/dist/nutui.css';

NutUI.install(Vue);
复制代码

做完这些，我们就可以快速的使用它进行我们项目的开发了。最终用了 1天时间完成了项目的开发，5个页面重构加数据交互，是不是很快，第二天在测试过程中发现项目过大，于是简单的修改了下配置，由500多kb变成了 100多kb减少了 4成。不得不感慨NutUI提供的按需加载功能之强大。

安需加载的方式

首先， 下载 npm i @nutui/babel-plugin-separate-import -D 然后在根目录下找到 babel.config.js 在里面增加一个配置

"plugins": [
["@nutui/babel-plugin-separate-import", {
    "style": "css"
}]
]
复制代码

然后根据使用的频率，如果希望整个项目都能用例如 Dialog 这类的组件推荐在main.js这个文件中引用

import { Dialog} from '@nutui/nutui';
Dialog.install(Vue);
复制代码

接下来就可以在项目里面使用了。 如果我们选择了手动配置里面的ts，那么我们创建的项目就变成了xx.ts 引用多个组件时候记得注意书写格式

import { Dialog, Picker} from '@nutui/nutui';
复制代码

最后，祝愿大家使用开心，我在 git上同时也放了demo，vue-cli+nut 需要的可以直接拿走~

• vue-cli：cli.vuejs.org/zh/
• NutUI：nutui.jd.com/#/index

转载于:https://juejin.im/post/5cac4d61e51d456e80351666