认识达内从这里开始

对于网站开发程序员来说，网站的搭建除了需要ui设计师进行界面设计以外，同时也需要java工程师进行后台编程开发。但是这两者之间就需要前端开发工程师进行桥接。下面我们就一起来了解和学习一下前端开发技术都有哪些。

1.使用scss

cnpminode-sasssass-loader-D

webpack.base.config.js里面加

{

test:/.scss$/,

loaders:["style","css","sass"]

},

2.vuex在ie中不兼容

cnpmibabel-polyfill-D

webpack.base.config.js里面改

entry:{

app:['babel-polyfill','./src/main.js']

},

3.图片引入问题

在utils.js找到ExtractTextPlugin.extract

加publicPath:'../../'

背景图得用require('./a.jpg')

至于放在static里面，如果项目上线后不是放在根目录，会出错

4.vue-router异步加载组件

路由里面写

{

path:'*',

component:resolve=>require(['@/components/index/index'],resolve)

}

在webpack.prod.conf.js找到chunkFilename

改chunk[id]

防止出现0.js1.js改后变成chunk0.js

5.模拟数据

dev-server.js里面借用node的express

6.取消map，减轻打包量

在config/index.js

productionSourceMap:false,

7.反向代理

在config/index.js

proxyTable:{

'/api':{

target:'http://localhost:8088/api',

changeOrigin:true,

pathRewrite:{

'^/api':''

}

}

},

为什么用，你做了就知道了

8.引入奥森字体

import'./assets/css/font-awesome.min.css'

assets/css

assets/fonts

css和fonts在同一级目录

和以前用法一致，

9.定义全局公用方法

引入自定义的ajax绑定到全局vue上

import*asmyapifrom'./assets/js/utils.js'

Object.defineProperty(Vue.prototype,'$ajax',{value:myapi.ajax});

10.配置打包后资源路径

在config/index.js改

assetsPublicPath:'/'根目录

assetsPublicPath:'./'本地

assetsPublicPath:'${ctx}${themes_path}/'java代码

assetsPublicPath:'http://localhost/dist/'dist

assetsPublicPath:'#/a/b/c/d'层层嵌套的

看打包后项目放的路径

11.pc端用elementui框架

按需引入element里面的单独的组件，否则全部引入有点大

cnpmibabel-plugin-component-D

.babelrc配置

"plugins":["transform-runtime",['component',[

{

"libraryName":"element-ui",

"styleLibraryName":"theme-default"

}

]]],

替换主题

去官网找，然后把下载的主题替换node_modules里面的_element-ui/@1.4.2@element-ui/lib里面的theme-default

然后重新npmstart

12.移动端用vuxui框架

初始化

cnpminstallvue-cli-g

vueinitairyland/vux2youProjectName

cdyouProjectName

npminstall

npmrundev

vux用的是less不用配置就可以单独引入某个组件而不是整体

13.数据操作

lodash在各个组件中可以单独引入，不用配置

天生的函数操作库，随便用

14.可配置

在webpack.base.config.js里面

resolve:{

//需要忽略的后缀

extensions:['.js','.vue','.json','.css'],

//别名，就是很长的路径用一个变量代替

alias:{

'vue$':'vue/dist/vue.esm.js',

'@':resolve('src')

}

},

{

test:/.(png|jpe?g|gif|svg)(\?.*)?$/,

loader:'url-loader',

options:{

//10kb以下的图片被编译成base64格式，可修改

limit:10000,

//自动生成一个7位数的hash，可去掉

name:utils.assetsPath('img/[name].[hash:7].[ext]')

}

},

[/color][color=#00b0f0][/color]

作者：前端一锅煮

来源：qdfuns

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。