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赋值给变量。

巴特西

vue部分问题

最新文章

热门文章