码迷,mamicode.com
首页 > 其他好文 > 详细

vue部分问题

时间:2018-07-02 00:09:20      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:bsp   serve   ali   babel   rewrite   base64   less   target   public   

[color=#00b050]学 vue 的看过来,
vue-cli 挺好用的,但是遇到具体情况还得做一部分调整和配置
默认你已经成功启动 vue-cli

1.使用 scss
cnpm i node-sass sass-loader -D
webpack.base.config.js 里面加
{
test: /.scss$/,
loaders: ["style", "css", "sass"]
},


2.vuex 在ie中不兼容
cnpm i babel-polyfill -D
webpack.base.config.js 里面改
entry: {
app: [‘babel-polyfill‘,‘./src/main.js‘]
},

3.图片引入问题
在 utils.js 找到 ExtractTextPlugin.extract
加 publicPath:‘../../‘
<img src="./a.jpg" >
<img :src="{item}" >

背景图 得用require(‘./a.jpg‘)
至于放在static里面,如果项目上线后不是放在根目录,会出错

4.vue-router 异步加载组件
路由里面写
{
path: ‘*‘,
component: resolve => require([‘@/components/index/index‘],resolve)
}
在 webpack.prod.conf.js 找到 chunkFilename
改 chunk[id]
防止出现 0.js 1.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 * as myapi from ‘./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: ‘www.aa.com/a/b/c/d‘ 层层嵌套的
看打包后项目放的路径

11.pc端用 element ui框架
按需引入 element 里面的单独的组件,否则全部引入有点大
cnpm i babel-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
然后重新 npm start

12.移动端用 vux ui框架
初始化
cnpm install vue-cli -g
vue init airyland/vux2 youProjectName
cd youProjectName
npm install
npm run dev

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]

vue部分问题

标签:bsp   serve   ali   babel   rewrite   base64   less   target   public   

原文地址:https://www.cnblogs.com/sxgxiaoge/p/9251803.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!