Chalk

项目用到了vue,elementUI，结合Webpack打包运行的时候报错 web-im@1.0.0 dev F:\demo\web-im webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 13% building modules 32/75 modules 43 active …te&index=0!F:\demo\web-im\src\App.vue{ parser: “babylon” } is deprecated; we now treat it as { pa rser: “babel” }. 94% asset optimization ERROR Failed to compile with 1 errors 10:32:34 error in ./node_modules/element-ui/lib/theme-chalk/index.css Module build failed: ParseError: F:\demo\web-im\node_modules\element-ui\lib\theme-chalk\index.css:1:63 1| var escape = require("…/…/…/css-loader/lib/url/escape.js")

main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App.vue' import router from './router/index.js' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app' , router, components: {App}, template: '<App/>' }) View Code index.js import Vue from 'vue' import Router from 'vue-router' import Home from '../components/Home' import Content from

自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。 yarn add element-theme --dev 2.安装chalk主题 安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码，这里从 npm 安装。 yarn add element-theme-chalk -D 3.初始化变量文件 主题生成工具安装成功后，如果全局安装可以在命令行里通过 et 调用工具，如果安装在当前目录下，需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss ，当然你可以传参数指定文件输出目录。 node_modules/.bin/et -i 执行命令 命令执行成功之后，会在根目录生成 scss文件 element-variables.scss 。 4、修改主题色 在 element-variables.scss 文件里修改 $–color-primary:#4b5f6e，即你想要的主题颜色 5、编译主题 执行主题编译命令生成主题，根目录会生成一个theme的文件夹 。 node_modules/.bin/et 6、引入自定义主题 把生成的主题按颜色改名放置 src

这个城市看过美也看过丑陋，看过豪华的当然更多是简陋，我们试着在这钢筋结构中，搓出一点火星将渴望自由灵魂解救 假期结束背上你的行囊，起航 [ 在这里感谢" 我是一名好程序员 " https://www.cnblogs.com/wangqi2019/ ] 话不多说这个小demo是这个样子的 点击新建按钮( 父组件新建按钮 )使弹窗显示也就是elementUI中的el-dialog( 需要自己改结构和样式 ) 弹窗( 子组件弹窗 )显示后输入内容相对应操作,点击叉号或取消按钮隐藏并清空输入的所有内容，点击提交成功后隐藏弹窗并清空输入的内容， 操作的时候会涉及到传值问题父子传值 ( dialogFormVisible控制显示隐藏true显示、false隐藏 ) 新建vue文件用来创建弹窗 common -> createVenue( 子组件 ) < template > < div class ="createNewFormBox" > < el-dialog title ="新建场馆" :visible.sync ="dialogFormVisible" > < el-form :model ="ruleForm" :rules ="rules" ref ="ruleForm" label-width ="100px" class ="demo-ruleForm" > < el-form

自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。 yarn add element-theme --dev 2.安装chalk主题 安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码，这里从 npm 安装。 yarn add element-theme-chalk -D 3.初始化变量文件 主题生成工具安装成功后，如果全局安装可以在命令行里通过 et 调用工具，如果安装在当前目录下，需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss ，当然你可以传参数指定文件输出目录。 node_modules/.bin/et -i 执行命令 命令执行成功之后，会在根目录生成 scss文件 element-variables.scss 。 4、修改主题色 在 element-variables.scss 文件里修改 $–color-primary:#4b5f6e，即你想要的主题颜色 5、编译主题 执行主题编译命令生成主题，根目录会生成一个theme的文件夹 。 node_modules/.bin/et 6、引入自定义主题 把生成的主题按颜色改名放置 src

自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。 yarn add element-theme --dev 2.安装chalk主题 安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码，这里从 npm 安装。 yarn add element-theme-chalk -D 3.初始化变量文件 主题生成工具安装成功后，如果全局安装可以在命令行里通过 et 调用工具，如果安装在当前目录下，需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss ，当然你可以传参数指定文件输出目录。 node_modules/.bin/et -i 执行命令 命令执行成功之后，会在根目录生成 scss文件 element-variables.scss 。 4、修改主题色 在 element-variables.scss 文件里修改 $–color-primary:#4b5f6e，即你想要的主题颜色 5、编译主题 执行主题编译命令生成主题，根目录会生成一个theme的文件夹 。 node_modules/.bin/et 6、引入自定义主题 把生成的主题按颜色改名放置 src

起因 最近因公司需求，需要实现主题换肤功能，不仅仅是颜色的更改，还需要包括图片，字体等文件等更换，因此在百度里各种实现方案后，决定根据scss+style-loader/useable做换肤。 项目开始 首先我们用vue-element-admin这个开源的后台管理系统项目来做demo演示，为了便于做二次开发，下载vue-admin-template来开发。 // 从github下载vue-admin-template clone https://github.com/PanJiaChen/vue-admin-template.git cd vue-admin-template npm install npm run dev 运行成功后的效果  安装style-loader处理器 因为vue-admin-template项目是添加过sass-loader依赖的，所以不用我们再次安装，在上一步就已经安装好了。 npm install style-loader --save-dev 创建主题文件 在src目录下创建theme-chalk、theme-light主题文件夹 在两个主题目录下创建index.useable.scss文件  在index.useable.scss中写入样式 // theme-chalk/index.useable.scss body {

vue3.0比vue2.0简化了许多。 在这里呢就做了一个简单的标签页面。在这当中难免会有些错误，请勿见怪。 1.vue的页面编写，也就是app.vue这个文件作为主入口文件，当然这个主入口文件也可以自定义命名，但自定义的入口文件呢需要去main.js这个文件中配置，在这呢不涉及路由和数据，仅仅从初学入手，简答的搭建一个页面。 import Vue from 'vue' import App from './App.vue' import './registerServiceWorker' // import router from './router' import store from './store' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue. use (ElementUI) new Vue ({ // router, store, ElementUI, render : h => h (App) }). $mount ('#app') 2.我们可以新建一个views或者一个 components这样一个文件夹，在这里面创建一两个个组件，组建创建完成先不忙着写组件。 1）

每当你发现自己和大多数人站在一边，就是时候停下来思考了。—— 马克·吐恩 因为这部分内容稍有些复杂，所以讲解之前先贴出github地址和视频讲解地址： 项目源码： github.com/Walker-Leee… 视频讲解，请搜索微信公众号 《JavaScript全栈》 相信大家在工作中都有如下经历： 开发新项目，很多逻辑比如：项目架构、接口请求、状态管理、国际化、换肤等之前项目就已经存在，这时，我们选择“信手拈来”，ctrl + c，ctrl + v 二连，谈笑间，新项目搭建完成，无非是要改改一些文件和包名； 项目增加某个模块时，复制一个已有模块，改改名字，新的模块就算创建成功了； 项目的规范要无时无刻不在同事耳边提及，就算有规范文档，你还需要苦口婆心。 使用复制粘贴有以下缺点： 重复性工作，繁琐而且浪费时间 copy过来的模板容易存在无关的代码 项目中有很多需要配置的地方，容易忽略一些配置点 人工操作永远都有可能犯错，建新项目时，总要花时间去排错 框架也会不断迭代，人工建项目不知道最新版本号是多少，使用的依赖都是什么版本，很容易bug一大堆。 承受过以上一些痛苦的同学应该不少，怎么去解决这些问题呢？我觉得，脚手架能够规避很多认为操作的问题，因为脚手架能够根据你事先约定的规范，创建项目，定义新的模块，打包，部署等等都能够在一个命令敲击后搞定，提升效率的同时降低了入职员工的培训成本