Vue2+webpack+mintUI搭建

依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

修改配置文件后必须要重新启动npm run dev

一、安装Vue

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。

只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:

安装全局vue-cli脚手架、webpack

命令输入

npm install -g vue-cli                       //全局安装vue-cli

npm install -g webpack                     //全局安装webpack

npm install -g webpack-dev-server    //在项目中安装webpack的本地webserver

npm install style-loader css-loader  // 安装style-loader和css-loader用于解析css文件

npm install babel-core babel-loader  //安装babel-core和babel-loader用于转译ES6代码为浏览器可读代码

npm install vue vue-loader vue-router vue-template-compiler  //安装vue和vue-router相关插件,由于最终代码需要vue支持,所以安装为最终依赖

npm -y init   //生成package.json文件

建议:全局安装vue-cli、webpack,同时在项目中安装webpack的本地webserver,在webpack最新版本4.25.1中要哦安装webpack-cli

           判断vue,webpack,node,npm安装成功:vue -V ,node -v即可

二、webpack创建一个新项目

1、Vue init webpack project-name

由于node的版本是6.9.1会有一些警告,并不影响项目的运行;安装时网速如果较慢可能会卡住

2、npm install mint-ui –save

安装mint-ui 

3、npm install babel-plugin-component

按需引入的方法引入多个组件

配置.babelrc

mint-ui的使用文档mint-ui documentation

需要引入 Mint UI ,这里有两种情况:

  1. 引入全部组件

    如果项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中:

                import Mint from 'mint-ui';

                Vue.use(Mint);

                import 'mint-ui/lib/style.css';

  2. 按需引入

    如果你只需要使用某个组件,可以仅引入这个组件,Mint UI 能够保证在代码打包时,与这个组件无关的文件不会出现在最终代码里。比如需要引入 Button 组件,则在 main.js 中:

          import Button from 'mint-ui/lib/button';

           import 'mint-ui/lib/button/style.css';

         Vue.component(Button.name, Button);

三、安装sass\scss

3.1 安装sass的依赖包

npm install --save-dev sass-loader  //sass-loader依赖于node-sass

npm  install --save-dev node-sass

3.2 在build文件夹下的webpack.base.conf.js的rules里面添加配置

3.3 需要用到sass的地方写上

或者 

scoped:代表作用域在此模板下

四、开发服接口调用

由于弃vue-resource推axios,所以这边主要使用axios用法

4.1 安装axios

npm install axios --save-dev

4.2 改写原型链

在main.js中引如axios。由于在其他组件中无法使用axios命令,所以需要将axios改写为Vue的原型属性。

import axios from 'axios'  //引入axios

Vue.prototype.$http=axios //修改Vue的原型属性

4.3 开启跨域代理,保证开发服跨域成功以及正式服成功调取

4.3.1 在config的index.js中开启跨域

4.3.2  在config的dev.env.js中修改API,保证和index.js设置的一样


4.3.3 修改main.js,进行原型挂靠

4.3.4 在模板中调取的方法

先定义host

get,post的调取方式


4.3.5 修改config的index.js的host,换成本地的IP地址可以在手机上访问本地

4.3.6 如何使用JQuery

    安装npm install jquery --save-dev   //-jquery一定要小写不然会提示  Please use 'jquery' (all lowercase)

    在bulid文件夹下webpack.dev.conf.js添加


在bulid文件夹下webpack.prod.conf.js添加


入口文件main.js中输入


五、vue-cil和webpack中本地静态图片的路径问题解决方案

css中的本地图片路径在打包后的问题

开发模式下css中用url()引用图片是正常的,但是打包后图片路径却并没有正确处理

解决办法:修改build文件下utils.js

六、胡说八道的注意点

6.1 .gitignore中不可以禁掉build,否则webpack打包有问题

6.2 上传favicon.ico

6.3 安装sass-loader时 error:TypeError: this.getResolve is not a function,原因:版本过高引起的,解决方法:把项目package.json文件中sass-loader版本改为7.3.1。执行命令,重新安装项目依赖 npm i:

你可能感兴趣的:(Vue2+webpack+mintUI搭建)