【VUE】微商城（一）----安装mint-ui,mui,sass

1、安装mint-ui

1)、进入项目根目录，按住 shift键 然后鼠标右键点击 在此处打开powershell 打开命令行窗口

2)、运行命令 cnpm install mint-ui --save 下载安装mint-ui，不报红正常都没问题

3)、使用vscode打开项目，点击文件 打开文件夹

4)、选中创建好的项目文件夹

5)、项目 src下的 main.js 增加以下代码，结果如图所示

// 导入mint-ui组件库
import MintUI from mint-ui
import mint-ui/lib/style.css

// 注册mint-ui
Vue.use(MintUI)

6)、百度搜索mint-ui 进入mint-ui官网

7) 、点击开始使用

8）、选择中文

9）、找到button 然后复制几个按钮组件到 app.vue中

10）运行 npm run serve 启动项目

11）、访问默认首页 出现三个不同样式按钮，说明 mint-ui安装成功。如下图所示

2、安装mui

1)、进入mui官网

2）、点击 GitHub地址 进入mui的github

3）、 点击 code --> download zip 下载压缩包

4）、在项目src下创建一个lib文件夹，并且在lib文件夹里面再创建一个mui文件夹

5）、解压下载好的mui压缩包，进入dist文件夹 ，将里面的三个文件夹复制到上面创建好的mui文件夹里面

6）、在main.js中导入mui框架样式

// 导入mui框架样式
import ./lib/mui/css/mui.css

3、安装sass

1）、进入项目根目录打开命令行窗口 运行 cnpm install sass-loader@8.0 -D 下载安装sass-loader

2)、运行 cnpm install node-sass@^4.13 -D 安装node-sass

3)、运行cnpm install sass@^1.3.0 -D 安装sass

4）、安装fibers 运行 cnpm install fibers@>=3.1.0 -D 安装fibers

5）、验证是否安装成功， 在app.vue中添加测试代码，启动项目

看到以下结果，说明安装成功