95992828九五至尊2

882828九五至尊手机版cli中相遇的几个难点,成立Vue项目手续

四月 17th, 2019  |  882828九五至尊手机版

序言:框架未有好坏之分,能一挥而就须要就可以。此前没事用vue模仿过BOSS直聘App(纯属娱乐),实际职业中开支过三个后台管理体系,境遇过多数坑,终于闲下来稍微计算多少个难点分享一下!

一.是因为vue项目依赖 node.js npm 必要先安装

反省是不是有node.js npm vue
win+r 输入cmd 输入node -v 回车会并发node,js的版本
输入npm -v 回车会油不过生npm的本子
输入vue -V 回车会现出vue的本子

一、所蒙受的标题(对cli格局开采不理解绕路),以及化解办法

2.安装vue

npm install -g vue-cli
-g 表示全局安装,vue-cli是模块,全局安装的模块能够在命令行直接运用
是因为npm网址在国内速度一点也不快,所以能够在指令后边加上天猫商城的镜像
即:npm install -g vue-cli
–registry=https://registry.npm.taobao.org
之后,能够vue –V查看vue是或不是安装好,出现版本号即安装成功。

1:当地怎么着布置跨域和后台联调

3.接下来是创办项目框架

即使想放到钦赐的目录下,先进入那个目录再实施创造项指标下令
例如: e:回车 //进入E盘 cd test回车 //进入E盘的test文件夹
E:\test\vue init webpack myProjectName *
//创造三个基于”webpack”的花色,后边是种类名 *
逐条遵照提醒输入,项目名、项目描述、项目笔者等等,
然后壹并回车 看到最终那个种类就创设好了。

二:假如非要使用jQuery,该怎么布署到全局

四.运营测试

npm run dev
1般流览器会活动跳转出分界面http://localhost:8080/,也得以手动展开流览器器输
入地址。
npm run build 打包

三:npm run build打包后的文本怎样使用相对路线,以及去掉不想要的.map文件

注意:

设置config文件下的index.js中build对象assetsPublicPath属性值为空,幸免卷入后识别文件路线错误。端口号dev的port属性可修改端口号,防止端口争持

四:如何使用自身包裹的JS代码

按需安装别的重视

  • fastclick

先进行安装fastclick的下令。
npm install fastclick -S (npm install –save fastclick)
882828九五至尊手机版,然后,在main.js中引进,并绑定到body
import FastClick from ‘fastclick’
FastClick.attach(document.body)

  • axios

npm install axios(若选用天猫商城源安装 cnpm install axios)
在main.js中引入
import axios from ‘axios’
Vue.prototype.$http = axios (依照个体习惯,可加可不加)

  • vux

1.npm install vux –save
二.装置vux-loader
(这些vux文书档案就好像没介绍,当初没设置结果报了一群错误)
npm install vux-loader –save -dev (npm install vux-loader –save)
三.在build/webpack.base.conf.js 文件实行布署
const vuxLoader = require(‘vux-loader’)
const webpackConfig = originalConfig // 原来的 module.exports
代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, { plugins:
[‘vux-ui’] })

  • less

1.npm install less less-loader –save -dev (npm install less
less-loader –save)
二.修改webpack.config.js文件,配置loader加载注重,让其协理外部的less,在原本的代码上加多
{
test: /.less$/,
loader: “style-loader!css-loader!less-loader”,
}
叁.App.vue中 style标签里丰硕lang=”less”
style内引进less文件路径,例如:@import ‘./assets/less/common.less’;
也可以直接引进less文件,在index.html引进后,须要引进less.js

  • 引入font-awesome图标

先cnpm install font-awesome –save引进正视
然后在main.js引入 font-awesome/css/font-awesome.min.css 即可。
譬如说:import ‘./assets/font-awesome/css/font-awesome.min.css’
//字体Logo

5:假若利用axios去处理ajax如何放在全局

二、化解办法(基于vue二.叁.三,暗中同意的cli文件路线)

壹、本地怎么样陈设跨域和后台湾同胞联谊会调(须求2点),a:在原本配置文件上加上配置,增添的任务是:config/index.js内的dev的proxyTable属性(类似webpack>devServer下的proxy),比如下图

882828九五至尊手机版 1

上图中意味是:当接口中遇见api字段的时候会映射到:“http://wjf.localTest.com:80”这个地址(需要后台配置允许跨域),且api会被替换为空,api是自定义的字段名字只是在请求接口的时候和配置文件协商的一个类似id的东西。不耽误打包上线。

b:映射地址的IP和照耀地址到本人Computer的HOSTS文件,(例如http://wjf.localTest.com:80的ip是:123.321.168.192),此时只需要把:123.321.168.192 
   wjf.localTest.com 增多到本机Computer的HOSTS文件就可以消除地方跨域调试。

c:完毕现在怎么利用如:

882828九五至尊手机版 2

如此那般在methods中行使的时候得带上自个儿配置的api字段,那里为了本地和线上应用第贰套代码定义了_this.isLocal字段。

 

贰、倘诺非要使用JQ(1般不要),怎么着安插到全局,要求二步,

a:npm install -S jquery  安装JQ

b:增多配置,具体地方:build/webpack.base.conf.js内,先引进webpack

882828九五至尊手机版 3

再计划个webpack插件把JQ挂在大局

882828九五至尊手机版 4

诸如此类就足以在methods中放心的应用:jquery了(此时和script标签引进的利用一样~)

 

三、npm run build打包后的文本怎么样采纳相对路线,以及去掉不想要的.map文件

以此化解办法绝对简便易行,依旧改暗许的配置文件,具体地方:config/index.js中,如下图

882828九五至尊手机版 5

图中一是把相对路线改为相对路线(那样打包后就足以不管放在服务器上此外文件夹下),图中贰是幸免卷入后有着的.map文件

 

四、如何运用自个儿包裹的JS代码,平常都以script标签引进,cli格局就不是的了。比如自个儿包裹了3个api.js在:src/js/api.js,如:

882828九五至尊手机版 6

Store包罗:操作seeionStorage和localStorage以及原生Ajax的包裹,如何使用,须求导入

882828九五至尊手机版 7

诸如此类就能够在methods中欢畅的施用自身包装的方式了

882828九五至尊手机版 8

 

伍、倘使利用axios去处理ajax怎么样放在全局,需求二点

a:先npm install axios -S 

b:src/main.js内引进并挂在大局,如

882828九五至尊手机版 9

诸如此类就能够在methods中快乐的使用this.$http去get大概post了

882828九五至尊手机版 10

案例参考:戳这里

相关文章

Your Comments

近期评论

    功能


    网站地图xml地图