0
点赞
收藏
分享

微信扫一扫

【VUE】微商城(一)----安装mint-ui,mui,sass

快乐小鱼儿_9911 2022-04-03 阅读 146

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中添加测试代码,启动项目

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

 

举报

相关推荐

0 条评论