vue部分问题
[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" alt="">
<img :src="{item}" alt="">
背景图 得用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]
<template> <div> <ul> <li v-for="item in itemlis">{{ item.title }}</li> </ul> </div> </template> <script> import css from '../assets/css/base.css' import Vue from'vue' import VueResource from 'vue-resource' Vue.use(VueResource) export default { name: 'HelloWorld', created:function(){ this.$http.get('api/seller').then((res)=>{ var arrJson=JSON.parse(res.bodyText) this.itemlis=arrJson.data.list //注意使用箭头函数才可用this不然需要在函数外先定义变量把this赋值给变量 console.log(this.itemlis) },function(err){ console.log(err) }) }, //组件里面必须用函数,return方式获取data data () { return { msg: 'Welcome to Your Vue.js App', itemlis:[], } } } </script>
箭头函数才可以用this 不然需要在函数外先定义变量把this赋值给变量。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步