webpack 加载stylus失败_stylus webpack - CSDN
精华内容
参与话题
  • 前言 ElementUI 目前版本是1.1,虽然还在1.x...本文介绍在真正开始使用ElementUI 之前的准备工作,适合第一次使用webpack打包工具和想体验 ElementUI 的小白同学。 1. 安装Vue2.0 注意: 保证npm版本是3.10.x 及...
        

    前言

    ElementUI 目前版本是1.1,虽然还在1.x阶段,但是组件种类已经很丰富了,用来ElementUI 做管理页面,非常合适。本文介绍在真正开始使用ElementUI 之前的准备工作,适合第一次使用webpack打包工具和想体验 ElementUI 的小白同学。

    1. 安装Vue2.0

    注意:

    1. 保证npm版本是3.10.x 及以上,想省事的话就重新安装 nodejs 6.x 的版本

    2. 请事先配置国内npm镜像,以免安装失败,配置方法:
      修改 ~/.npmrc 文件如下( Windows用户最好用gitbash进行编辑 )

    registry=https://registry.npm.taobao.org
    chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver
    phantomjs_cdnurl=https://npm.taobao.org/dist/phantomjs

    准备工作做好了之后 进行如下步骤

    npm install vue-cli -g  #安装脚手架 
    vue init webpack my-vue #安装 webpack 模板,my-vue 是项目名,自己定义 此命令会提示让你确认设置,一路回车就好了 
    cd my-vue #进入工程目录
    npm install #安装依赖

    vue init 会自动生成 npm 项目,并帮你写好 package.json

    通过查看package.json 可以查看项目依赖版本

    "dependencies": {
      "vue": "^2.1.0"
    },
    "devDependencies": {
      "autoprefixer": "^6.4.0",
      "babel-core": "^6.0.0",
      "babel-eslint": "^7.0.0",
      "babel-loader": "^6.0.0",
      "babel-plugin-transform-runtime": "^6.0.0",
      "babel-preset-es2015": "^6.0.0",
      "babel-preset-stage-2": "^6.0.0",
      "babel-register": "^6.0.0",
      "chai": "^3.5.0",
      "chalk": "^1.1.3",
      "chromedriver": "^2.21.2",
      "connect-history-api-fallback": "^1.1.0",
      "cross-spawn": "^4.0.2",
      "css-loader": "^0.25.0",
      "element-ui": "^1.0.7",
      "eslint": "^3.7.1",
      "eslint-config-standard": "^6.1.0",
      "eslint-friendly-formatter": "^2.0.5",
      "eslint-loader": "^1.5.0",
      "eslint-plugin-html": "^1.3.0",
      "eslint-plugin-promise": "^3.4.0",
      "eslint-plugin-standard": "^2.0.1",
      "eventsource-polyfill": "^0.9.6",
      "express": "^4.13.3",
      "extract-text-webpack-plugin": "^1.0.1",
      "file-loader": "^0.9.0",
      "function-bind": "^1.0.2",
      "html-webpack-plugin": "^2.8.1",
      "http-proxy-middleware": "^0.17.2",
      "inject-loader": "^2.0.1",
      "isparta-loader": "^2.0.0",
      "json-loader": "^0.5.4",
      "karma": "^1.3.0",
      "karma-coverage": "^1.1.1",
      "karma-mocha": "^1.2.0",
      "karma-phantomjs-launcher": "^1.0.0",
      "karma-sinon-chai": "^1.2.0",
      "karma-sourcemap-loader": "^0.3.7",
      "karma-spec-reporter": "0.0.26",
      "karma-webpack": "^1.7.0",
      "lolex": "^1.4.0",
      "mocha": "^3.1.0",
      "nightwatch": "^0.9.8",
      "node-sass": "^4.0.0",
      "opn": "^4.0.2",
      "ora": "^0.3.0",
      "phantomjs-prebuilt": "^2.1.3",
      "postcss-loader": "^1.2.1",
      "sass-loader": "^4.1.0",
      "selenium-server": "2.53.1",
      "semver": "^5.3.0",
      "shelljs": "^0.7.4",
      "sinon": "^1.17.3",
      "sinon-chai": "^2.8.0",
      "url-loader": "^0.5.7",
      "vue-loader": "^10.0.0",
      "vue-style-loader": "^1.0.0",
      "vue-template-compiler": "^2.1.0",
      "webpack": "^1.13.2",
      "webpack-dev-middleware": "^1.8.3",
      "webpack-hot-middleware": "^2.12.2",
      "webpack-merge": "^0.14.1"
    }

    注意:

    如果你发现你的 webpack 版本是 2.x

    那么你之前应该用了 vue init webpack-simple my-vue 命令

    本篇文章就不再实用了

    你可以使用 vue list 查看每种模板的描述,然后重新安装模板

    执行下面的命令,稍等片刻,如果你看到了一个V字LOGO那么Vue2.0就已经准备妥当了。

    npm run dev

    2. 安装 ElementUI

    npm install element-ui --save-dev

    官方网站链接 http://element.eleme.io/#/zh-...

    默认主题的样式文件挺大的,压缩后 110K 左右

    所以官方文档中推荐了一个按需加载的 babel 插件,在引用指定组件的同时,还能够把组件相应的 css 文件 import 进来

    官方文档的示例配置都是基于 webpack2.0 的,webpack1.x 的配置如下

    {
      "presets": ["es2015", "stage-2"],
      "plugins": ["transform-runtime",
        ["component", [
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-default"
          }
        ]]
      ],
      "comments": false
    }

    CSS 文件增加前缀

    比较坑的是,这些组件的 css 的浏览器兼容性并不好,所以需要通过 autoprefixer 加工一下

    找到 build/webpack.base.conf 文件

    vue 下的 postcss项,提到外面,并设置兼容更低的浏览器版本

      ...
      postcss: [
        require('autoprefixer')({
          browsers: ["Chrome >= 1","Safari >= 1","Firefox >= 1","ie >= 8"] // 粗暴一点
        })
      ],
      vue: {
        loaders: utils.cssLoaders({ sourceMap: useCssSourceMap })
      }
      ...

    找到 build/utils.js 文件的 cssLoaders 方法

    给使用到的文件类型 加一个 postcss 加载器,如果没有就不要加

      ...
      return {
        css: generateLoaders(['css','postcss']), // 项目中使用到的文件匹配规则 多加一个 postcss 加载器
        less: generateLoaders(['css', 'less']),
        sass: generateLoaders(['css', 'sass', 'postcss']),// 项目中如果使用到了 sass 多加一个 postcss 加载器
        scss: generateLoaders(['css', 'sass', 'postcss']),// 项目中如果使用到了 scss 多加一个 postcss 加载器
        stylus: generateLoaders(['css', 'stylus']),
        styl: generateLoaders(['css', 'stylus'])
      }

    保存之后,使用命令安装这些加载器,项目初始化时并没有安装,需要手动执行

    npm install postcss-loader --save-dev
    npm install sass-loader --save-dev

    CSS 文件分离

    引入的组件css文件会打包到 js 文件中,并在执行js时动态加载到 <head> 标签内,产生很多内联样式标签<style>

    无论是从文件缓存,还是结构洁癖的角度来看,把CSS代码打包到js中,是件很不舒服的事

    按理来说这是webpack 的锅,但是可能会影响到初学者对ElementUI的第一印象

    我们可以通过修改 webpack 配置把 ElementUI 的 css ( commonCSS ),和自己写的模块的 css ( appCSS ) 分离开,并用外部文件引用的方式加载

    还是 build/utils.js 文件的 cssLoaders 方法,做如下修改

    ...
    if (options.extract) {  // 是否分离文件
      if(options.ExtractPlugin){ // 如果指定了分离插件,就使用插件处理
        return options.ExtractPlugin.extract('vue-style-loader', sourceLoader)
      }else{
        return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
      }
    } else {
      return ['vue-style-loader', sourceLoader].join('!')
    }
    ...
    

    还是 build/webpack.base.conf.js 文件

    ...
    let appCSS = new ExtractTextPlugin('css/app.css'); // vue中的css 会被打包到 app.css 中
    ...
      vue: {
        loaders: utils.cssLoaders({ extract:true, sourceMap: useCssSourceMap ,ExtractPlugin:appCSS })
      },
      plugins: [
        appCSS, // 设置插件
      ]
    

    修改 build/webpack.dev.conf.js 文件 如下

    ...
    let commonCSS = new ExtractTextPlugin('css/common.css'); //将另外引入的css文件打包到common.css中
    ...
    module: {
      loaders: utils.styleLoaders({ extract:true, sourceMap: config.dev.cssSourceMap,ExtractPlugin:commonCSS })
    },
    ...
    plugins: [
      commonCSS,  //设置插件
      ...
    ]

    这样一来,资源的分类和打包看起来就合理多了,准备工作做完了,可以开心的写代码了。


    本文系力谱宿云LeapCloud旗下MaxLeap团队_UX组成员:王诗诗【原创】
    MaxLeap技术博客首发:https://blog.maxleap.cn/archi...

    相关文章
    5个提高Node.js应用性能的技巧
    前端,想说爱你不容易!
    浏览器存储及使用

    作者往期佳作
    多屏互动——H5中级进阶
    无需Flash实现图片裁剪——HTML5中级进阶

    欢迎关注微信公众号:MaxLeap_yidongyanfa
    图片描述

    展开全文
  • VUE 常见问题汇总

    千次阅读 2019-01-31 10:17:46
    问题汇总Q:安装超时(install timeout)方案有这么些:cnpm&nbsp;: 国内对npm的镜像版本/*cnpm website: https://npm.taobao.org/*/ npm install -g cnpm --registry=https://registry.npm.t...

    问题汇总

    Q:安装超时(install timeout)

    方案有这么些:

    • cnpm : 国内对npm的镜像版本
    1. /*
    2. cnpm website: https://npm.taobao.org/
    3. */
    4. npm install -g cnpm --registry=https://registry.npm.taobao.org
    5. // cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些
    • yarn 和 npm 改源大法

      • 使用 nrm 模块 : www.npmjs.com/package/nrm
      • npm config : npm config set registry https://registry.npm.taobao.org
      • yarn config : yarn config set registry https://registry.npm.taobao.org

    Q:安装一些需要编译的包:提示没有安装python、build失败等

    因为一些 npm 的包安装需要编译的环境,mac 和 linux 都还好,大多都齐全
    window 用户依赖 visual studio 的一些库python 2+,

    windows的小伙伴都装上:


    Q:can't not find 'xxModule' - 找不到某些依赖或者模块

    这种情况一般报错信息可以看到是哪个包抛出的信息.
    一般卸载这个模块,安装重新安装下即可.


    Q:data functions should return an object

    这个问题是 Vue 实例内,单组件的data必须返回一个对象;如下

    1. export default {
    2. name: 'page-router-view',
    3. data () {
    4. return {
    5. tabs: [
    6. {
    7. title: '财务信息',
    8. url: '/userinfo'
    9. },
    10. {
    11. title: '帐号信息',
    12. url: '/userinfo/base'
    13. }
    14. ]
    15. }
    16. }
    17. }

    为什么要 return 一个数据对象呢?

    官方解释如下: data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!

    简言之,组件复用下,不会造成数据同时指向一处,造出牵一发而动全身的破问题...


    Q:我给组件内的原生控件添加事件,怎么不生效了!!!

    1. <!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件-->
    2. <!--// 错误例子1-->
    3. <el-input placeholder="请输入特定消费金额 " @mouseover="test()"></el-input>
    4. <!--// 错误例子2-->
    5. <router-link :to="item.menuUrl" @click="toggleName=''">
    6. <i :class="['fzicon',item.menuIcon]"></i>
    7. <span>{{item.menuName}}</span>
    8. </router-link>
    9. <!--上面的两个例子都没法触发事件!!!-->
    10. <!--究其原因,少了一个修饰符 .native-->
    11. <router-link :to="item.menuUrl" @click.native="toggleName=''">
    12. <i :class="['fzicon',item.menuIcon]"></i>
    13. <span>{{item.menuName}}</span>
    14. </router-link>
    15. <!--明明官方文档有的,一堆人不愿意去看,,Fuck-->
    16. <!--https://cn.vuejs.org/v2/guide/components.html#给组件绑定原生事件-->

    Q:我用了 axios , 为什么 IE 浏览器不识别(IE9+)

    那是因为 IE 整个家族都不支持 promise, 解决方案:

    1. npm install es6-promise
    2. // 在 main.js 引入即可
    3. // ES6的polyfill
    4. require("es6-promise").polyfill();

    Q:我在函数内用了this.xxx=,为什么抛出Cannot set property 'xxx' of undefined;

    这又是this的套路了..this是和当前运行的上下文绑定的...

    一般你在axios或者其他 promise , 或者setInterval 这些默认都是指向最外层的全局钩子.

    简单点说:"最外层的上下文就是 window,vue内则是 Vue 对象而不是实例!";

    解决方案:

    • 暂存法: 函数内先缓存 this , let that = this;(let是 es6, es5用 var)
    • 箭头函数: 会强行关联当前运行区域为 this 的上下文;

    this的知识, 读"<<你不知道的 JS 系列>>"最为合适了,里面讲的很清楚


    Q:我看一些Vue教程有这么些写法,是什么意思@click.prevent,v-demo.a.b;

    就拿这两个例子来说吧.

    • @click.prevent : 事件+修饰符 , 作用就是点击但又阻止默认行为
    • v-demo.a.b: 自定义指令+修饰符. 具体看你什么指令了,修饰符的作用大多是给事件增加一些确切的拓展功能

    比如阻止事件冒泡,阻止默认行为,访问到原生控件,结合键盘快捷键等等

    传送门:事件修饰符;

    可以自定义修饰符么?也是可以的..

    可以通过全局 config.keyCodes 对象自定义键值修饰符别名:


    Q:为什么我的引入的小图片渲染出来却是 data:image/png;base64xxxxxxxx

    这个是 webpack 里面的对应插件处理的.

    对于小于多少 K 以下的图片(规定的格式)直接转为 base64格式渲染;

    具体配置在webpack.base.conf.js里面的 rules里面的 url-loader

    这样做的好处:在网速不好的时候先于内容加载和减少http的请求次数来减少网站服务器的负担。


    Q:Component template shold contain exactly one root element.If you are useing v-if on multiple elements , xxxxx

    大体就是说,单组件渲染 DOM 区域必须要有一个根元素,不能出现同级元素.
    可以用v-ifv-else-if指令来控制其他元素达到并存的状态

    换个直白的解释,就是有一个唯一的父类,包裹者;

    比如一个 div(父包含块) 内部多少个同级或者嵌套都行,但是最外层元素不能出现同级元素!!!!


    Q:跨域问题怎么破!比如No 'Access-Control-Allow-Origin' header is present on the requested resource.

    这种问题老生常谈了,我就不细说了..大体说一下;

    1: CORS , 前后端都要对应去配置,IE10+
    2: nginx 反向代理,一劳永逸 <-- 线上环境可以用这个

    线下开发模式,比如你用了vue-cli, 里面的 webpack 有引入了proxyTable这么个玩意,
    也可以做接口反向代理

    1. // 在 config 目录下的index.js
    2. proxyTable: {
    3. "/bp-api": {
    4. target: "http://new.d.st.cn",
    5. changeOrigin: true,
    6. // pathRewrite: {
    7. // "^/bp-api": "/"
    8. // }
    9. }
    10. }
    11. // target : 就是 api 的代理的实际路径
    12. // changeOrigin: 就是是变源,必须是...
    13. // pathRewrite : 就是路径重定向,一看就知道

    当然还有依旧坚挺的jsonp大法!不过局限性比较多,比较适合一些特殊的信息获取!


    Q:我需要遍历的数组值更新了,值也赋值了,为什么视图不更新!!!

    那是因为有局限性啊,官方文档也说的很清楚,只有一些魔改的之后的方法提供跟原生一样的使用姿势(却又可以触发视图更新);

    一般我们更常用(除了魔改方法)的手段是使用:this.$set(obj,item,value);

    传送门:数组更新检测(触发视图更新)


    Q:为什么我的组件间的样式不能继承或者覆写啊!!!

    单组件开发模式下,请确认是否开启了 CSS模块化功能!!

    也就是scoped(vue-cli 里面配置了,只要加入这个属性就自动启用)

    <style lang="scss" scoped></style>

    为什么不能继承或者覆写呢,那时因为每个类或者 id 乃至标签都会给自动在css后面添加hash!

    比如

    1. // 写的时候是这个
    2. .trangle{}
    3. // 编译过后,加上了 hash
    4. .trangle[data-v-1ec35ffc]{}

    这些都是在 css-loader 里面配置!!!


    Q:路由模式改为history后,除了首次启动首页没报错,刷新访问路由都报错!

    必须给对应的服务端配置查询的主页面..也可以认为是主路由入口的引导

    官方文档也有,为毛总有人不喜欢去看文档,总喜欢做伸手党....FUCK

    传送门 : Vue-Router history Mode


    Q:我想拦截页面,或者在页面进来之前做一些事情,可以么?

    Of course !!

    各种路由器的钩子!! 传送门: 导航守卫;

    当然,记忆滚动的位置也可以做到,详情翻翻里面的文档


    Q:TypeError: xxx is not a function

    这种问题明显就是写法有问题...能不能动点脑子!!


    Q:Uncaught ReferenceError: xxx is not define

    • 实例内的 data 对应的变量没有声明
    • 你导入模块报这个错误,那绝逼是导出没写好

    Q:Error in render function:"Type Error: Cannot read property 'xxx' of undefined"

    这种问题大多都是初始化的姿势不对;

    比如引入echart这些...仔细去了解下生命周期,再来具体初始化;

    vue 组件有时候也会(嵌套组件或者 props传递初始化)..也是基本这个问题


    Q:Unexpected token: operator xxxxx

    大佬,这个一看就是语法错误啊.
    基本都是符号问题.
    一般报错会给出哪一行或者哪个组件


    Q:npm run build之后不能直接访问

    大佬!你最起码得在本地搭个服务器才能访问好么!!


    Q:CSSbackground引入图片打包后,访问路径错误

    因为打包后图片是在根目录下,你用相对路径肯定报错啊....
    你可以魔改 webpack 的配置文件里面的static./static...但是不建议

    你若是把图片什么丢到assets目录下,然后相对路径,打包后是正常的


    Q:安装模块时命令窗口输出unsupported platform xxx

    一般两种情况,node版本不兼容,系统不兼容;

    解决方案: 要么不装,要么满足安装要求;


    Q:Unexpected tab charater这些

    一般是你用脚手架初始化的时候开了 eslint ;

    要么遵循规则,要么改变规则;

    要么直接把 webpack 里面的 eslint 检测给关闭了


    Q:Failed to mount component: template or render function not defined

    组件挂载失败,问题只有这么几个

    组件没有正确引入; 挂载点顺序错了了;

    自行动手排查


    Q:Unknown custom element: <xxx> - did you register the component correctly?

    组件没有正确引入或者正确使用,依次确认

    1. 导入对应的组件
    2. 在 components 内声明
    3. 在 dom 区域声明标签

    Q: axios的 post 请求后台接受不到!

    axios默认是 json 格式提交,确认后台是否做了对应的支持;

    若是只能接受传统的表单序列化,就需要自己写一个转义的方法...

    当然还有一个更加省事的方案,装一个小模块qs

    1. npm install qs -S
    2. // 然后在对应的地方转就行了..单一请求也行,拦截器也行...我是写在拦截器的.
    3. // 具体可以看看我 axios 封装那篇文章
    4. //POST传参序列化(添加请求拦截器)
    5. Axios.interceptors.request.use(
    6. config => {
    7. // 在发送请求之前做某件事
    8. if (
    9. config.method === "post"
    10. ) {
    11. // 序列化
    12. config.data = qs.stringify(config.data); // ***** 这里转义
    13. }
    14. // 若是有做鉴权token , 就给头部带上token
    15. if (localStorage.token) {
    16. config.headers.Authorization = localStorage.token;
    17. }
    18. return config;
    19. },
    20. error => {
    21. Message({
    22. // 饿了么的消息弹窗组件,类似toast
    23. showClose: true,
    24. message: error,
    25. type: "error.data.error.message"
    26. });
    27. return Promise.reject(error.data.error.message);
    28. }
    29. );

    Q:Invalid prop: type check failed for prop "xxx". Expected Boolean, got String.

    这种问题一般就是组件内的 props 类型已经设置了接受的范围类型,
    而你传递的值却又不是它需要的类型,写代码严谨些 OK?


    Q: 过滤器可以用于DOM区域结合指令么?

    1. // 不行,看下面的错误例子
    2. <li v-for="(item,index) in range | sortByDesc | spliceText">{{item}}</li>
    3. // `vue2+`的指令只能用语 mustache`{{}}` , 正确姿势如下:
    4. <span>{{ message | capitalize }}</span>

    Q: [...Array],...mapState,[SOME_MUTATION] (state) {},increment ({ commit }) {}这种写法是什么鬼!

    出门左拐,ES6+(ES2015)的基础去过一遍..

    上面依次:数组解构,对象解构,对象风格函数,对象解构赋值传递


    Q: 我的 Vue 网站为什么 UC 访问一片空白亦或者flex布局错乱!!

    来来来,墙角走起.... UC 号称移动界的 IE 这称号不是白叫的

    • flexbox 布局错乱,一般是你没有把兼容方案写上..就是带各种前缀,复合属性拆分
    • UC访问空白, 有一种情况绝对会造成,那就是 ES6的代码降级不够彻底. 其他情况可能就是路由配置问题(自己去排除)
      • 现在的开发都推荐按需引入,靠babel-preset-env 来控制,以达到打包体积减小.
      • 但是这样做的后果,有些内核比较老的...嘿嘿..拜拜..
      • 所以最好把代码完全 ES5话!!记住有些特性不能乱使用,没有对应的 polyfill,比如 ES6 的proxy

    Q:this.$set | this.$xxx 这个 $ 是个什么意思?是 jQuery的么,会冲突么?

    且看我细细道来.

    Vue 的$和 jQuery 的$并没有半毛钱的关系,就跟javascriptjava一样.

    Vue 的$是封装了一些 vue 的内建函数,然后导出以$开头...这显然并不是 jQuery的专利;

    jQuery 的$是选择器!!取得 DOM区域...两者的作用完全不一致!


    Q:Error in event handler for "click":"xxx"

    这个问题大多都是你写的代码有问题.你的事件触发了.
    但是组件内部缺少对应的实现或者变量,所以抛出事件错误.

    解决方案:看着报错慢慢排查


    Q: 组件的通讯有哪几种啊!!!

    基本最常用的是这三种;

    1. 父传子: props
    2. 子传父: emit
    3. 兄弟通讯:
      • event bus: 就是找一个中间组件来作为信息传递中介
      • vuex: 信息树

    传送门:


    Q:vuex的用户信息为什么还要存一遍在浏览器里(sessionStorage or localStorage)

    因为 vuex的 store 干不过刷新啊.
    保存在浏览器的缓存内,若用户刷新的话,值再取一遍呗;


    Q:"有 Vue + Vue Router + Vuex"或什么"express + vue + mongodb"的项目学习么

    Github 一搜一大堆,提这些问题的人动动脑子!.传送门:Github


    Q:线上若是 nginx,如何部署?以及反向代理这些!!

    传送门:一篇不大靠谱的nginx 1.11.10配置文件


    Q:"我会 Vue 我还需要学习 jQuery 或者原生 JS 么"

    jQuery还有很多公司在用,源码可以学习的地方很多;

    原生 js 是根本,不管是哪个前端框架,最终都是 js 实现的;
    只有基础扎实,才能学的比较深...

    框架只是加快开发,提高效率,但不是你在这一行长期立足的根本;

    前端的人不仅需要宽度,也要深度...这样才能走的更远....


    Q: npm run dev 报端口错误!Error: listen EADDRINUSE :::8080

    • 自己用 webpack搭脚手架的都不用我说了;
    • Vue-cli 里面的 webpack 配置: config/index.js
    1. dev: {
    2. env: require("./dev.env"),
    3. port: 8080, // 这里这里,若是这个端口已经给系统的其他程序占用了.改我改我!!!!!!
    4. autoOpenBrowser: true,
    5. assetsSubDirectory: "static",
    6. assetsPublicPath: "/",
    7. proxyTable: {
    8. "/bp-api": {
    9. target: "http://new.d.st.cn",
    10. changeOrigin: true,
    11. // pathRewrite: {
    12. // "^/bp-api": "/"
    13. // }
    14. }
    15. },

    Q: 什么时候用v-if,什么用 v-show!

    我们先来说说两者的核心差异;

    • v-if : DOM 区域没有生成,没有插入文档..等条件成立的时候才动态插入到页面!
      • 有些需要遍历的数组对象或者值,最好用这货控制,等到拿到值才处理遍历,不然一些操作过快的情况会报错,比如数据还没请求到!
    • v-show: DOM 区域在组件渲染的时候同时渲染了,只是单纯用 css 隐藏了
      • 对于下拉菜单,折叠菜单这些数据基本不怎么变动.用这个最合适了..而且可以改善用户体验,因为它不会导致页面的重绘,DOM 操作会!

    简言之: DOM结构不怎么变化的用v-show, 数据需要改动很大或者布局改动的用v-if


    Q: <template>是什么,html5的标签么?

    你猜对了..html5的标签还真有这么一个.传送门Can I Use:template

    不过 Vue 的 template 有点不一样,不是去给浏览器解析的....
    你可以理解为一个临时标签,用来方便你写循环,判断的....
    因为最终 template 不会解析到浏览器的页面,他只是在 Vue 解析的过程充当一个包裹层!
    最终我们看到的是内部处理后的组合的 DOM 结构!


    Q:the "scope" attribute for scoped slots …. replaced by "slot-scope" since 2.5

    这个问题只出现老项目升级到 vue2.5+的时候, 提示就是 scope 现在要用 slot-scope 来代替,
    但是 scope 暂时可以用,以后会移除


    Q: Uncaught ReferenceError : Vue is not defined!

    依次排除:

    • Vue是否正确引入!
    • Vue是否正确实例化!
    • Vue 用的姿势是否正确(比如你直接一个 Vue 的变量!!!刚好又没定义,,具体问题具体分析吧)

    Q: ERROR in static/js/xxxxxxx.js from UglifyJs

    我知道其中一种情况会报这种情况,就是你引入的 js,是直接引入压缩版本后的 js(xxx.min.js);
    然后 webpack 内又启用了 UglifyJs(压缩 JS的), 二重压缩大多都会报错!!

    解决方案:引入标准未压缩的 JS


    Q:props不使用:(v-bind)可以传递值么!

    可以,只是默认传递的类型会被解析成字符串!
    若是要传递其他类型,该绑定还是绑定!!


    Q: Uncaught TypeError : Cannot set property xxx which has only a getter

    这个问题就是你要操作的属性只允许 getter,不允许 setter;

    解决方案? 用了别人的东西就要遵循别人的套路来,不然就只能自己动手丰衣足食了!!


    Q: 单组件中里面的 import xxx from '@/components/layout/xxx'中的@是什么鬼!

    这是 webpack 方面的知识,看到了也说下吧...

    webpack可以配置alias(也就是路径别名),玩过 linux 或者 mac 都知道

    依旧如上,会自己搭脚手架的不用我说了...看看 vue-cli 里面的;

    文件名: build -> webpack.base.conf.js

    1. resolve: {
    2. extensions: [".js", ".vue", ".json"], // 可以导入的时候忽略的拓展名范围
    3. alias: {
    4. vue$: "vue/dist/vue.esm.js",
    5. "@": resolve("src"), // 这里就是别名了,比如@就代表直接从/src 下开始找起!!!
    6. "~": resolve("src/components")
    7. }
    8. },

    Q: SCSS(SASS) 还是 less,stylus 好!!

    三者都是预处理器;

    scss 出现最久,能做的功能比较多,但是若是普通的嵌套写法,继承,mixin 啊.

    这三个都差不多..会其中一个其他两个的粗浅用法基本也会了.不过!!!!

    写法有些差异:

    • scss: 写法上是像 css 靠齐
    • sass : 其实也就是 scss , 只是写法不一样...靠的是缩进
    • less : 跟 css 基本靠齐
    • stylus : 一样,靠缩进..跟pug(Jade)一样

    使用环境的差异:

    • scss 可以借助 ruby 或者 node-sass 编译
    • less 可以用 less.js 或者对应的 loader 解析
    • stylus 只能借助 loader 解析,它的出现就是基于 node 的

    也有一个后起之秀,主打解耦,插件化的!!! 那就是PostCSS,这个是后处理器!!!
    有兴趣的可以自行去了解,上面的写法都能借助插件实现!


    Q:Failed to compile with x errors : This dependency was not found !

    编译错误,对应的依赖没找到!!!

    解决如下:

    • 知道缺少对应的模块,直接装进去
    • 若是一个你已经安装的大模块(比如 axios)里面的子模块(依赖包)出了问题,卸载重装整个大模块.因为你补全不一定有用!

    Q:SyntaxError: Unexpected identifier;

    语法错误,看错误信息去找到对应的页面排查!!!


    Q: 为什么我的 npm 或者 yarn 安装依赖会生成 lock文件,有什么用!

    lock 文件的作用是统一版本号,这对团队协作有很大的作用;

    若是没有 lock 锁定,根据package.json里面的^,~这些..

    不同人,不同时间安装出来的版本号不一定一致;

    有些包甚至有一些breaking change(破坏性的更新),造成开发很难顺利进行!!!


    Q: 组件可以缓存么?

    可以,用keep-alive;

    不过是有代码的..占有内存会多了...所以无脑的缓存所有组件!!!别说性能好了..切换几次,
    有些硬件 hold不住的,浏览器直接崩溃或者卡死..

    所以keep-alive一般缓存都是一些列表页,不会有太多的操作,更多的只是结果集的更换..

    给路由的组件meta增加一个标志位,结合v-if就可以按需加上缓存了!


    Q:package.json里面的dependencies 和devDependencies的差异!

    其实不严格的话,没有特别的差异;
    若是严格,遵循官方的理解;

    • dependencies : 存放线上或者业务能访问的核心代码模块,比如 vue,vue-router;
    • devDependencies: 处于开发模式下所依赖的开发模块,也许只是用来解析代码,转义代码,但是不产生额外的代码到生产环境, 比如什么babel-core这些

    如何把包安装到对应的依赖下呢?

    1. npm install --save xxxx // dependencies
    2. npm install --save-dev xxxx // devDependencies
    3. //也能用简易的写法(i:install,-S:save,-D:save-dev)
    4. npm i -S xxxx // npm install --save xxxx
    5. npm i -D xxxx // npm install --save-dev xxxx

    Q: 安装chromedriver报错!!姿势没错啊npm i -D chromedriver

    恩,伟大的 GFW.....解决方案:指定国内的源安装就可以了

    npm install --save-dev chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver


    Q:Vue ,React, Angular学习哪个好?哪个工作比较好找!

    Vue属于渐进式开发,传统开发过渡 MVVM 模式的小伙伴,Vue 比较好上手,学习成本比较低
    基础比较好的,有折腾精神的,可以选择NG5或者React 16;

    NG5需要学习typescriptrxjs,还用到比较多的新东西,比如装饰器,后端的注入概念.ng有自己的一整套 MVVM 流程;

    VueReact核心只是view,可以搭配自己喜欢的

    React的写法偏向函数式写法,还有 jsx,官方自己有 flow,当然也能搭配ts,我也没怎么接触..所以也有一定的学习成本;

    至于哪个比较好找工作!!!告诉你..若是只会一个框架,那不是一个合格的前端;

    人家要的是动手能力,解决能力!!!!技术和待遇是成正比的!!

    颜值和背景,学历,口才可以加分..但是这些条件你必须要有的基础下才能考虑这些!!!


    Q: 我有个复杂组件需要有新增和编辑的功能同时存在,但是字段要保持不变性怎么破

    字段保持不变性怎么理解呢? 就是说比如新增和编辑同时共享一份 data;

    有一种就是路由变了,组件渲染同一个(不引起组件的重新渲染和销毁!),但是功能却不同(新增和编译)..

    比如从编辑切到新增,data必须为空白没有赋值的,等待我们去赋值;

    这时候有个东西就特别适合了,那就是immutable-js;

    这个东西可以模拟数据的唯一性!或者叫做不变性!


    Q:"首屏加载比较慢!!怎么破!打包文件文件比较大"

    依次排除和确认:

    • 减少第三方库的使用,比如jquey这些都可以不要了,很少操作 dom,而且原生基本满足开发
    • 若是引入moment这些,webpack 排除国际化语言包
    • webpack 常规压缩js,css, 愿意折腾的还可以引入 dll 这些
    • 路由组件采用懒加载
    • 加入路由过渡和加载等待效果,虽然不能解决根本,但起码让人等的舒心一点不是么!!!

    整体下来,打包之后一般不会太大;

    但是倘若想要更快?那就只能采用服务端渲染(SSR)了,可以避免浏览器去解析模板和指令这些;
    直接返回一个 html ....还能 SEO...


    Q: Vue SPA 没法做优化(SEO)!有解决方案么

    可以的,SSR(服务端渲染就能满足你的需求),因为请求回来就是一个处理完毕的 html

    现在 vue 的服务端开发框架有这么个比较流行,如下

    传送门:Nuxt.js


    Q: Vue可以写 hybird App 么!

    当然可以,两个方向.


    Q: Vue 可以写桌面端么?

    当然可以,有electronnode-webkit(nw);

    我只了解过electron;


    Q: Vue开发,项目中还需要 jQuery

    分情况探讨:

    1. 若是老项目,只是单纯引入 Vue 简化开发的,依旧用吧...
    2. 重构项目?或者发起新项目的,真心没必要了.开发思路不一样,很多以前用 DOM 操作的现在基本可以数据驱动实现,而少量迫不得已的DOM 操作原生就能搞定...而且能减小打包体积,速度又快,何乐而不为!!!

    Q:Vue PC(桌面)端,M(mobile:移动)端,用什么 UI 框架好啊!!!

    PC

    我推荐的只有两个 element UIiview

    Mobile

    Vux

    当然还有很多,但是基本用户的认知度都不高,这三个比较流行


    Q: Vue可以写微信小程序么,怎么搞起

    可以的,社区也有人出了对应的解决方案,比如比较流行的方案wepy;
    wepy你也可以理解为一个脚手架,让你的写小程序的方式更贴近你用vue-cli写 vue 的感觉...

    传送门:wepy


    Q:想要 mock 数据,直接请求 json文件 为什么不行!

    当然不行,浏览器安全机制不允许,JS天生不能越权(NodeJS不能单纯说是JS)

    你要 mock 数据,一般都有比较成熟的方案...传送门:


    来源:掘金
     

    (责任编辑:admin)
    顶一下
    (2)
    100.00%
    踩一下
    (0)
    0.00%
    ------分隔线----------------------------
    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价: 中立 好评 差评
    表情:
    用户名: 验证码:点击我更换图片 匿名?
    发表评论

    风趣探讨vue数组值变了,为什么视图没更新

    时间:2017-11-11 12:18来源:王兴欣 作者:admin
    风趣探讨vue双向绑定原理 很多初使用 Vue 的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看 官方文档 才发现,不是女

    风趣探讨vue双向绑定原理

    很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗?
    查看官方文档才发现,不是女神太高冷,而是你没用对方法。

     

     

     

    看来想让女神自己动,关键得用对方法。虽然在官方文档中已经给出了方法,但是在下实在好奇的紧,想要解锁更多姿势的话,那就必须先要深入女神的心,于是乎才有了去探索Vue响应式原理的想法。(如果你愿意一层一层地剥开我的心。你会发现,你会讶异…… 沉迷于鬼哭狼嚎 无法自拔QAQ)。

    前排提示,Vue的响应式原理主要是使用了ES5的Object.defineProperty,毫不知情的同学可以查看相关资料

    为啥数组不响应?

    仔细一想,Vue的响应是基于Object.definePropery的,这个方法主要是对对象属性的描述进行修改。数组其实也是对象,通过定义数组的属性应该也能产生响应的效果呀。先验证一下自己的想法,撸起袖子就开干。

    1. const arr = [1,2,3];
    2. let val = arr[0];
    3. Object.defineProperty(arr,'0',{
    4. enumerable: true,
    5. configurable: true,
    6. get(){
    7. doSomething();
    8. return val;
    9. },
    10. set(a){
    11. val = a;
    12. doSomething();
    13. }
    14. });
    15. function doSomething() {
    16. }

    然后在控制台中分别输入arrarr[0] = 2arr,可以看到如下图的结果。

     


    咦,一切居然都如预想猜想的一样。
    接下来,看到这段代码,有的同学可能会有所疑问,为啥在get()方法里不直接返回this[0]呢?而是要借助val来返回值呢?
    仔细一想,卧槽!!!差点特么的死循环了,你想呀,get()本身就是获取当前属性的值,在get()里调用this[0]不是等同于再次调用了get()方法吗? 好可怕好可怕,简直吓死劳资了。

     

    虽然你想象中的女神可能会这种姿势,但是你眼前的这个女神确实不是这种姿势的,像我这种屌丝属性暴露无疑的人怎么可能猜透女神的心思?为什么不这样响应数据呢?或许是因为数组和对象还是有所差别,定义数组的属性可能会产生一些麻烦与Bug。又或许是因为在交互的过程中可能会产生大量的数据,导致整体的性能下降。也有可能是作者权衡利弊之后用其他方法也可以达到数据响应的效果。反正我是猜不透啦。

    为啥调用数组原生方法就可以响应了?

    为什么使用了这些数组的方法就就能让数据响应了呢?
    先看看数组部分的源码吧。

    简单的来讲,def的作用就是重新定义对象属性的value值。

    1. //array.js
    2. import { def } from '../util/index'
    3. const arrayProto = Array.prototype
    4. export const arrayMethods = Object.create(arrayProto)
    5. //arrayMethods是对数组的原型对象的拷贝,
    6. //在之后会将该对象里的特定方法进行变异后替换正常的数组原型对象
    7. /**
    8. * Intercept mutating methods and emit events
    9. */
    10. [
    11. 'push',
    12. 'pop',
    13. 'shift',
    14. 'unshift',
    15. 'splice',
    16. 'sort',
    17. 'reverse'
    18. ]
    19. .forEach(function (method) {
    20. // cache original method
    21. //将上面的方法保存到original中
    22. const original = arrayProto[method]
    23. def(arrayMethods, method, function mutator (...args) {
    24. const result = original.apply(this, args)
    25. const ob = this.__ob__
    26. let inserted
    27. switch (method) {
    28. case 'push':
    29. case 'unshift':
    30. inserted = args
    31. break
    32. case 'splice':
    33. inserted = args.slice(2)
    34. break
    35. }
    36. if (inserted) ob.observeArray(inserted)
    37. // notify change
    38. ob.dep.notify()
    39. return result
    40. })
    41. })

    贴出def部分的代码

    1. /**
    2. * Define a property.
    3. */
    4. export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
    5. Object.defineProperty(obj, key, {
    6. value: val,
    7. enumerable: !!enumerable,
    8. writable: true,
    9. configurable: true
    10. })
    11. }

    array.js是对数组的一些方法进行变异,我们以push方法来举个例子。
    首先 就是要用original = arrayProto['push']来保存原生的push方法。

    然后就是要定义变异的方法了,对于def函数,如果不深究的话,def(arrayMethods,method,function(){}),这个函数可以粗略的表示为arrayMethods[method] = function mutator(){};
    假设在之后调用push方法,实际上调用的是mutator方法,在mutator方法中,第一件事就是调用保存了原生push方法的original,先求出实际的值。
    一堆文字看起来实在很抽象,那么写一段低配版的代码来表达源码的含义。

    1. const push = Array.prototype.push;
    2. Array.prototype.push = function mutator (...arg){
    3. const result = push.apply(this,arg);
    4. doSomething();
    5. return result
    6. }
    7. function doSomething(){
    8. console.log('do something');
    9. }
    10. const arr = [];
    11. arr.push(1);
    12. arr.push(2);
    13. arr.push(3);

    在控制台中查看结果为:

     

    那么源码中的

    1. const ob = this.__ob__
    2. let inserted
    3. switch (method) {
    4. case 'push':
    5. case 'unshift':
    6. inserted = args
    7. break
    8. case 'splice':
    9. inserted = args.slice(2)
    10. break
    11. }
    12. if (inserted) ob.observeArray(inserted)
    13. // notify change
    14. ob.dep.notify()

    这段代码就是对应的doSomething()

    在该代码中,清清楚楚的写了2个单词的注释notify change,不认识这2个单词的同学就百度一下嘛,这里就由我代劳了,这俩单词的意思是发布改变
    每次调用了该方法,都会求出值,然后做一些其他的事情,比如发布改变与观察新增的元素,响应的其他过程在本篇就不讨论了。

    1. [
    2. 'push',
    3. 'pop',
    4. 'shift',
    5. 'unshift',
    6. 'splice',
    7. 'sort',
    8. 'reverse'
    9. ]

    目前一共有这么些方法,只要用对方法就能改变女神的姿势哟!

    展开全文
  • webpack(2)_打包JS

    千次阅读 2018-03-09 17:25:38
    webpack打包 前端打包就是把所有的 js 文件, css 文件都分别压缩合并为一个js 和css 文件, 这样浏览器就可以通过少量的 HTTP 请求获取到所需要的前端资源, 可以节省流量, 加快页面加载速度。当然打包过程还需要对...

    webpack打包

    前端打包就是把所有的 js 文件, css 文件都分别压缩合并为一个js 和css 文件, 这样浏览器就可以通过少量的 HTTP 请求获取到所需要的前端资源, 可以节省流量, 加快页面加载速度。当然打包过程还需要对TypeScript、Vue等js解析,Less、Sass、Stylus等css预处理、资源的合并压缩、js合并、混淆、兼容优化等。

    打包方式

    webpack可以对js进行一系列的打包处理,主要有两种方式:

    • 命令行打包
      webpack entry<entry> output
    • 通过配置文件打包
      webpack --config webpack.config.js

    命令行打包

    命令webpack entry output:entry是要打包的js文件,output是要输出的打包完成的文件。
    如将app.js打包成bundle.js放在output目录下,示例:
    webpack app.js ./output/bundle.js

    通过配置文件打包

    webpack除了使用命令行打包外,还可以通过配置文件进行打包,一般情况下,项目都是通过webpack配置文件对js进行打包。文件名一般为webpack.config.js。
    若配置文件名为webpack.config.js,只需要在命令行输入webpack即可执行webpack.config.js配置文件。若配置文件名不为webpack.config.js则需要执行命令webpack --config webpack.conf.js

    • 以下是一个常见的简单配置
    module.exports = {
        entry: {
            app: './app.js'
        },
        output: {
            filename: './output/[name].[hash:5].js'
        }
    }
    展开全文
  • 解决方案:详见webpack resolve.module章节 ~默认查找node_modules中包

    解决方案:详见webpack resolve.module章节
    ~默认查找node_modules中包

    展开全文
  • vue-cli 引入 stylus 失败

    2017-08-27 11:12:54
    最近在使用vue-cli创建项目时发现无法在js文件中引入stylus文件,以前自己写的代码就没有问题,死活找不到原因,所以来问问各个大神. 操作步骤很简单: 先通过vue-cli的webpack模板建立文件夹: vue init webpack ...
  • Vue.js(一) Vue.js + element-ui 扫盲

    万次阅读 多人点赞 2019-08-14 11:29:30
    一:node.js是什么 我们知道javascript代码只能在浏览器上运行,只有浏览器能够解析js代码,如果想要javascript代码能够在服务器端运行就必须提供一个Javascript的运行环境(runtime environment),这就是node.js。...
  • laravel-mix打包 js css

    千次阅读 2018-07-31 17:08:34
    Laravel Mix 提供了一套流式 API,使用一些通用的 CSS 和 JavaScript 预处理器为 Laravel 应用定义 Webpack 构建步骤。通过简单的方法链,你可以流式定义资源管道。例如: mix.js('resources/assets/js/app.js', ...
  • vue-cli项目结构详解

    万次阅读 多人点赞 2017-12-26 17:06:21
    Vue-cli是vue官方出品的快速构建单页应用的脚手架,如果你是初次尝试Vue,不建议使用,推荐你使用普通引入javascript文件的方式进行学习,如果你已经有vue基础那么就可以用vue-cli这个脚手架进行学习。...
  • vue-cli配置文件详解

    千次阅读 2018-08-01 18:03:40
    webpack版本号为3.6.0   这段时间以来,项目一直都是用Vue全家桶及vue-cli,于是便把vue-cli配置文件给整理了以下,希望对大家能有所帮助。 一:文件的配置结构如下 ├─build │ ├─build.js │ ├─...
  • 利用webpack4搭建vue服务器端渲染SSR

    千次阅读 2019-12-13 11:25:07
    应该对webpack简单了解?官方文档 Node.js框架Koa简单了解?官方文档 正文 构建服务器端渲染(SSR)我们可以利用vue-server-renderer 插件更简单的构建SSR。官方的一段代码: // 第 1 步:创建一个 Vue 实例 const ...
  • vue脚手架搭建项目

    千次阅读 2020-07-23 17:57:58
    一. express 近几年来前端不仅仅只会做前端页面,对于后端也涉及了一些,当然node.js的诞生就为前端工程师提供了学习后端的桥梁 言归正传,使用node就要先引入node,下面就说一下引入node的命令: ...
  • 带你从零开始了解webpack

    千次阅读 2020-08-16 10:49:25
    webpack 配置中有多种方式定义 entry 属性 单个入口(简写)语法 用法:entry: string|Array<string> webpack.config.js const config = { entry: './src/index.js', }; module.exports = config; entry...
  • 配置Vue服务器端渲染SSR(一)

    千次阅读 2018-11-08 09:26:35
    阅读前 为什么使用服务器渲染?
  • cannot read property 'render' of undefined

    千次阅读 2019-08-26 00:00:39
    首先查看配置文件,在webpack.config.server.js中入口配置错误: 1 在服务端webpack配置中入口文件写错为entry: path.join(__dirname, ‘…/client/client-entry.js’) 应该为entry: path.join(__dirname, ‘…/...
  • 使用webpack2.0 搭建前端项
  • Webpack导入Vue实战

    千次阅读 2019-06-02 12:52:20
    上一文中做了一个基本的Webpack环境搭建,对于webpack+vue组合的搭建过程,网上搜索资料不少,好好研究任意一篇就可以掌握原理和过程,本文没有利用vue-cli脚手架工具搭建,而是自己动手基于webpack环境导入vue项目...
  • vue-cli3的配置参考

    千次阅读 2019-07-08 18:36:02
    目录 目标浏览器 vue.config.js publicPath outputDir assetsDir indexPath filenameHashing pages lineOnSave runtimeCompiler transpileDependencies productionSourceMap ...confi...
  • 具体的错误信息,如下图所示: 为什么会产生这个问题呢,原因是我在components目录下的Login.vue组件中添加了style样式。 这个页面的全部代码如下: <template> <div class="login_container">...
  • 1.1.1. vue-cli 引入 stylus 失败 先通过vue-cli的webpack模板建立文件夹: vue init webpacktest-stylus 然后安装依赖 npminstall 再然后 安装stylus stylus-loader style-loader npminstallstylus stylus-...
  • 在运行的页面中,只有index.html和app.js,而...webpack的入口是package.json文件,运行npm run dev即运行node build/dev-server.js,其实是运行bulid目录下的dev-server.js文件如图为dev-server.js文件 其中一开始
1 2 3 4 5 ... 20
收藏数 413
精华内容 165
关键字:

webpack 加载stylus失败