vue-cli搭配什么UI库好呢?

用vue-cli搭建项目的话,配合使用哪个UI库好呢?

以前没有用vue,就直接拿bootstrap写了,感觉用的还是很习惯的,简单呀。后来学了vue,我就搭配了element一起使用,好难啊,状况百出。想知道有没有简单易上手的UI库和vue一起使用比较合适的?

图片说明

2个回答

用element呀,样式挺好改的,把公共的样式改在main.css里,然后单个页面的样式改在当前vue文件内,然后用 !important 或者 deep就可以啦

用vue-cli生成的时候可以选择 ui的呀! 那时候就选择 elemen-ui 就行了. 安装elemen-ui的文档操作, 将一些元素安装文档操作一遍, 再应用到项目中. 问题不大的. 多练习就好了

monoplasty
monoplasty 回复全易: 很多UI库基本都是大同小异, 没有好与不好, 只要能满足业务需求就行
大约一年之前 回复
qq_42618566
全易 试过element,样式特别不好修改,现在正在尝试muse-ui
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
安装vue-cli时出现的错误

for vue 1.x use: vue init wabpack#1.0 elm 为什么会出现乱码呢?![图片说明](https://img-ask.csdn.net/upload/201705/03/1493781947_49259.png)

VUE-cli3.0 按需导入 iview 中的组件 DatePicker 报错

VUE-cli3.0 按需导入 iview 中的组件 DatePicker 报错,而且只存在DatePicker 和TImePicker两个组件中![图片说明](https://img-ask.csdn.net/upload/201909/30/1569831940_838943.png)![图片说明](https://img-ask.csdn.net/upload/201909/30/1569831955_425651.png)![图片说明](https://img-ask.csdn.net/upload/201909/30/1569831960_166594.png)![图片说明](https://img-ask.csdn.net/upload/201909/30/1569831968_494381.png),浏览器控制台里的fecha是 DatePicker 依赖包里里的变量,写过demo试试 全局导入不会出现问题,只按需导入会出现,有没有大佬知道怎么回事

vue-cli 3x + element-ui 导航栏菜单高亮问题

{ path: '/plan', name: 'plan', component: () => import('./views/plan/Plan.vue') }, { path: '/plandetails', name: 'plandetails', component: () => import('./views/plan/Plandetails.vue') } <el-menu :default-active="$route.path" router class="el-menu-vertical-demo" background-color="#58586E" text-color="#fff" active-text-color="#fff"> <el-menu-item index="/plan"> <i class="iconfont icon-jihua" style="font-size: 19px;"></i> </el-menu-item> </el-menu> ![图片说明](https://img-ask.csdn.net/upload/201905/28/1559037119_126730.png) 点击导航栏的计划菜单进行路由跳转 ![图片说明](https://img-ask.csdn.net/upload/201905/28/1559037145_944908.png) 之后页面右侧会显示列表,![图片说明](https://img-ask.csdn.net/upload/201905/28/1559037214_390093.png), 点击某个列表会跳转到详情,![图片说明](https://img-ask.csdn.net/upload/201905/28/1559037302_313463.png),跳转到详情之后导航菜单就不高亮了![图片说明](https://img-ask.csdn.net/upload/201905/28/1559037349_19317.png),vue初学者,有点蒙,请各位大佬帮帮忙~~

vue-cli3.0使用prerender-spa-plugin插件预渲染时 publicpath的配置问题

按照网上搜寻到的办法 配置预渲染 : **vue.config.js**: ``` // 这三项一定要有,因为下面configureWebpack中用到了 const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require('path'); module.exports = { // 预渲染关键配置 configureWebpack: () => { if (process.env.NODE_ENV !== 'production') return; return { plugins: [ new PrerenderSPAPlugin({ // 生成文件的路径,也可以与webpakc打包的一致。 // 下面这句话非常重要!!! // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname, 'dist'), // 对应自己的路由文件,如果有参数需要写具体参数,比如/a/:id需要写/a/123456 routes: ['/', '/about'], // 这个很重要,如果没有配置这段,也不会进行预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }) ] }; } }; ``` 修改成自己的: 1.添加 ``` publicPath: process.env.NODE_ENV === 'production' ? '/fish/' : '/', outputDir: 'fish', ``` 2.修改: ``` staticDir: path.join(__dirname, 'fish'), ``` 最终修改后**vue.config.js**: ``` // 这三项一定要有,因为下面configureWebpack中用到了 const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require('path'); module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/fish/' : '/', outputDir: 'fish', // 预渲染关键配置 configureWebpack: () => { if (process.env.NODE_ENV !== 'production') return; return { plugins: [ new PrerenderSPAPlugin({ // 生成文件的路径,也可以与webpakc打包的一致。 // 下面这句话非常重要!!! // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname, 'fish'), // 对应自己的路由文件,如果有参数需要写具体参数,比如/a/:id需要写/a/123456 routes: ['/', '/about'], // 这个很重要,如果没有配置这段,也不会进行预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }) ] }; } }; ``` 3.问题出现: 配置了publicPath后,进行打包编译时就会一直卡住不动,编译时弹出的浏览器一直白屏 控制台报两行看不懂的错: ![图片说明](https://img-ask.csdn.net/upload/201909/29/1569727333_173612.png) 求教如何正确配置 publicPath

vue/cli脚手架 4.0.5 运行 vue ui报错

错误 如下 劳烦各路大神帮忙看一下 ![图片说明](https://img-ask.csdn.net/upload/201911/22/1574392843_675632.png) <br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> emmm 这里为了凑字数 大哥们就可以不看了 哈哈哈哈哈哈 万分感谢

vuecli4 引入vantUI 样式导入不成功

使用vuecli4,按需引入vantui 样式引入不成功 main.js中引入 ``` import {Button} from 'vant' Vue.use(Button) ``` babel.config.js ``` module.exports = { presets: ["@vue/cli-plugin-babel/preset"], plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', // 指定样式路径 style: true }, 'vant'], ] }; ``` 页面使用 ``` <van-button type="primary" size="large" @click="add">按钮</van-button> ``` 效果

nodejs npm 和 cnpm 安装的都很成功到最后vue-cli的时候也成功了但出现问题了

![图片说明](https://img-ask.csdn.net/upload/202004/21/1587441343_844050.jpg) 希望大神帮忙解决

通过VUE-CLI 3.0 UI 构建项目时 , 页面中多个空格占位符nbsp只显示1个,请问有什么需要配置的吗.

![图片说明](https://img-ask.csdn.net/upload/201911/11/1573441435_590638.png)![图片说明](https://img-ask.csdn.net/upload/201911/11/1573441441_33205.jpg)

关于vue的cli里面package.json文件?

求大神指教一下这里面的东西都是啥?特别是scripts里面的,我发现我家里电脑的scripts里面的东西跟公司里scripts里面的东西是不一样的? ``` { "name": "zhiliao.0", "version": "1.0.0", "description": "A Vue.js project", "author": "momo <552488648@qq.com>", "private": true, "scripts": { "dev": "node build/dev-server.js", "build": "npm run build-prod", "start": "cross-env node build/webpack.dll.js && cross-env TYPE=local node build/dev-server.js", "start-dev": "node build/webpack.dll.js && cross-env TYPE=dev node build/dev-server.js", "start-test": "node build/webpack.dll.js && cross-env TYPE=test node build/dev-server.js", "start-prod": "node build/webpack.dll.js && cross-env TYPE=prod node build/dev-server.js", "build-local": "cross-env TYPE=local model=dev node build/webpack.dll.js && cross-env TYPE=local node build/build.js", "build-dev": "cross-env TYPE=dev model=build node build/webpack.dll.js && cross-env TYPE=dev node build/build.js", "build-test": "cross-env TYPE=test model=build node build/webpack.dll.js && cross-env TYPE=test node build/build.js", "build-prod": "cross-env TYPE=prod model=build node build/webpack.dll.js && cross-env TYPE=prod node build/build.js" }, "dependencies": { "axios": "^0.15.3", "blueimp-md5": "^2.7.0", "es6-promise": "^4.1.0", "mint-ui": "^2.2.1", "qs": "^6.4.0", "vue": "^2.2.2", "vue-baidu-map": "^0.10.5", "vue-router": "^2.2.0", "vuex": "^2.2.1", "weixin-js-sdk": "^1.2.0" }, "devDependencies": { "add-asset-html-webpack-plugin": "^2.1.2", "autoprefixer": "^6.7.2", "babel-core": "^6.22.1", "babel-eslint": "^8.0.3", "babel-loader": "^6.2.10", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.2.1", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "babel-runtime": "^6.26.0", "chalk": "^1.1.3", "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.0.1", "cross-env": "^5.1.1", "css-loader": "^0.26.4", "eslint": "4.4.1", "eslint-config-standard": "10.2.1", "eslint-friendly-formatter": "3.0.0", "eslint-loader": "1.9.0", "eslint-plugin-html": "3.1.1", "eslint-plugin-import": "2.7.0", "eslint-plugin-node": "5.1.1", "eslint-plugin-promise": "3.5.0", "eslint-plugin-standard": "3.0.1", "eventsource-polyfill": "^0.9.6", "express": "^4.14.1", "extract-text-webpack-plugin": "^2.0.0", "file-loader": "^0.10.0", "form-data": "^0.2.0", "friendly-errors-webpack-plugin": "^1.1.3", "function-bind": "^1.1.0", "happypack": "^4.0.0", "html-webpack-plugin": "^2.28.0", "http-proxy-middleware": "^0.17.3", "iconv-lite": "^0.4.7", "mime": "~1.3.4", "node-sass": "^4.9.3", "opn": "^4.0.2", "optimize-css-assets-webpack-plugin": "^1.3.0", "ora": "^1.3.0", "portfinder": "^1.0.13", "request": "~2.72.0", "rimraf": "^2.6.0", "sass-loader": "^6.0.6", "semver": "^5.3.0", "shelljs": "^0.8.1", "url-loader": "^0.5.7", "urlencode": "^1.1.0", "verification-code": "^1.0.0", "vue-loader": "^11.1.4", "vue-style-loader": "^2.0.5", "vue-template-compiler": "^2.2.4", "webpack": "^2.2.1", "webpack-bundle-analyzer": "^2.2.1", "webpack-dev-middleware": "^1.10.0", "webpack-hot-middleware": "^2.16.1", "webpack-merge": "^2.6.1", "webpack-parallel-uglify-plugin": "^1.0.2", "workbox-webpack-plugin": "^2.1.2", "ws": "^0.4.32" }, "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" }, "publishConfig": { "registry": "http://registry.npm.alibaba-inc.com" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] } ```

npm安装@vue/cli失败,提示仅支持https

之前装过这些,但因为别的原因,把AppData下相关文件和用户的注册文件删了重装,结果这次安装失败。 先是卡在**fetchmetadata:sill resolvewithnewmodule typescript**不动,然后取消了两次后, 配置了阿里镜像:npm config set registry https://registry.npm.taobao.org,然后再执行就报错误,说仅支持https。 这是dos界面提示 ![图片说明](https://img-ask.csdn.net/upload/201909/20/1568914845_998077.png) cnpm模块的package.json文件: ![图片说明](https://img-ask.csdn.net/upload/201909/20/1568915208_526334.png) debug文件: ``` 0 info it worked if it ends with ok 1 verbose cli [ 1 verbose cli 'D:\\work softs\\web_html\\nodejs\\node.exe', 1 verbose cli 'D:\\work softs\\web_html\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', 1 verbose cli 'install', 1 verbose cli '@vue/cli', 1 verbose cli '-g' 1 verbose cli ] 2 info using npm@6.10.3 3 info using node@v12.10.0 4 verbose npm-session 599580d47326bd14 5 silly install loadCurrentTree 6 silly install readGlobalPackageData 7 silly fetchPackageMetaData error for @vue/cli@latest Only HTTP(S) protocols are supported 8 timing stage:rollbackFailedOptional Completed in 1ms 9 timing stage:runTopLevelLifecycles Completed in 27ms 10 verbose stack TypeError: Only HTTP(S) protocols are supported 10 verbose stack at getNodeRequestOptions (D:\work softs\web_html\nodejs\node_modules\npm\node_modules\node-fetch-npm\src\request.js:135:11) 10 verbose stack at D:\work softs\web_html\nodejs\node_modules\npm\node_modules\node-fetch-npm\src\index.js:44:21 10 verbose stack at new Promise (<anonymous>) 10 verbose stack at fetch (D:\work softs\web_html\nodejs\node_modules\npm\node_modules\node-fetch-npm\src\index.js:41:10) 10 verbose stack at D:\work softs\web_html\nodejs\node_modules\npm\node_modules\make-fetch-happen\index.js:332:14 10 verbose stack at D:\work softs\web_html\nodejs\node_modules\npm\node_modules\promise-retry\index.js:29:24 11 verbose cwd C:\Users\86180 12 verbose Windows_NT 10.0.18362 13 verbose argv "D:\\work softs\\web_html\\nodejs\\node.exe" "D:\\work softs\\web_html\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "@vue/cli" "-g" 14 verbose node v12.10.0 15 verbose npm v6.10.3 16 error Only HTTP(S) protocols are supported 17 verbose exit [ 1, true ] ```

vue-loader安装后在.vue里的<style></style>里面写样式就报错?

提问:请问下,vue-loader也安装了为何在.vue的style标签了 还是不能写样式呢?webpack4,使用webpack-dev-server命令打包时就报错.应该如何解决? 我已经尝试卸载vue-loader重新安装,删除node-modules重新跑环境,但并没有解决掉.难到是某个加载器的版本的问题吗? main.js ``` import Vue from 'vue'; import app from './App.vue'; import { Header } from 'mint-ui'; Vue.component(Header.name, Header); var vm=new Vue({ el:'#app', render:c=>c(app) }); ``` App.vue ``` <template> <div class="box"> <!--header--> <mt-header fixed title="固定在顶部"></mt-header> <!--body--> <!--foot--> <h1>这是 App 组件</h1> </div> </template> <script> </script> <style lang="sass" scoped> .box{ padding-top:40px; } </style> ``` package.json ``` "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-component": "^0.10.1", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.6.1", "babel-preset-stage-0": "^6.24.1", "css-loader": "^0.28.7", "file-loader": "^1.1.5", "html-webpack-plugin": "^2.30.1", "less": "^2.7.3", "less-loader": "^4.0.5", "node-sass": "^4.5.3", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "vue-loader": "^13.3.0", "vue-template-compiler": "^2.5.2", "webpack": "^3.8.1", "webpack-dev-server": "^2.9.3" }, "dependencies": { "bootstrap": "^3.3.7", "mint-ui": "^2.2.9", "vue": "^2.5.2", "vue-router": "^3.0.1" } } ``` 错误提示: ``` ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped": true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?indentedSyntax!./node_modules/vue-loader/lib/selector .js?type=styles&index=0!./src/App.vue Module build failed: .box{ ^ Invalid CSS after ".box{": expected "}", was "{" in F:\vuetest\day7\src\App.vue (line 19, column 6) @ ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":" data-v-7ba5bd90","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?indentedSyntax!./node_modul es/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-331 13:3-17:5 14:22-339 @ ./src/App.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/main.js

使用Django+vue+element-ui搭建项目时,element-ui的样式不生效,如何解决?

在腾讯云centos7上用Django+vue+element-ui搭建项目,按照网上资料下载了 npm i element-ui -S 也向webpack.base.conf.js 和 main.js中添加了代码, 且逻辑没有问题,页面可以正常那个访问且不报错,但样式就是不出来,折腾了一天多,网上资料看了无数,就是找不到原因(在本地windows上同样跑了一个vue前端项目试过,本地的样式是可以出来的) 在此请教,悬赏20 这是main.js中加的 ![图片说明](https://img-ask.csdn.net/upload/201903/11/1552316037_720112.png) node_modules/element-ui/lib/theme-chalk/index.css 是存在的,不过这个element-ui文件夹怎么是灰的?别人的都是红色的。 ![图片说明](https://img-ask.csdn.net/upload/201903/11/1552316477_34724.png) ![图片说明](https://img-ask.csdn.net/upload/201903/11/1552316504_854002.png) 这是页面: 样式出不来,也不报错: ![图片说明](https://img-ask.csdn.net/upload/201903/11/1552316581_670477.png)

运行Vue项目时,报错npm ERR! errno 1 npm ERR! Failed at the single@1.0.0 dev script.

运行Vue项目时,报错,不清楚是哪里出了问题 ``` Error: Cannot find module 'webpack-cli/bin/config-yargs' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15) at Function.Module._load (internal/modules/cjs/loader.js:562:25) at Module.require (internal/modules/cjs/loader.js:690:17) at require (internal/modules/cjs/helpers.js:25:18) at Object.<anonymous> (E:\HBuilderProjects\Vue\single\node_modules\_webpack-dev-server@3.7.1@webpack-dev-server\bin\webpack-dev-server.js:60:1) at Module._compile (internal/modules/cjs/loader.js:776:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! single@1.0.0 dev: `webpack-dev-server --open --hot --port 8020` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the single@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\asus\AppData\Roaming\npm-cache\_logs\2019-06-15T16_43_01_654Z-debug.log ``` ``` ``` 这个是package.json文件 ``` { "name": "single", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "dev": "webpack-dev-server --open --hot --port 8020" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "vue": "^2.6.10" }, "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^8.0.6", "babel-preset-env": "^1.7.0", "css-loader": "^3.0.0", "file-loader": "^4.0.0", "vue-html-loader": "^1.2.4", "vue-loader": "^15.7.0", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.6.10", "webpack": "^4.34.0", "webpack-dev-server": "^3.7.1" } } ```

在装了element-ui的vue项目中npm run dev的时候报错了,求教如何解决

在装了element-ui的vue项目中npm run dev的时候报错了 These dependencies were not found: * throttle-debounce/debounce in ./node_modules/_element-ui@2.6.1@element-ui/lib/element-ui.common.js, ./node_modules/_element-ui@2.6.1@element-ui/lib/tooltip.js and 1 other * throttle-debounce/throttle in ./node_modules/_element-ui@2.6.1@element-ui/lib/element-ui.common.js To install them, you can run: npm install --save throttle-debounce/debounce throttle-debounce/throttle 请问该如何解决

vue+element-ui如何提取一个自己写的js作为公共js

请教一下各位大神,我刚接触vue+element-ui几天,最近自己写了一个模糊查询的input框,现在需要作为项目公共的部分,可以被需要的html引用。 自己的想法是写一个公共的js,哪个html要就引用就行了,但是会有这样的问题: 1.element-ui的写法是:new Vue({el: '#app',别人的页面有这个el:'#app',假如我js里也写el:'#app',那他引用的话功能会用不了,估计是冲突了。 假如我写el: '#pp'那么功能还是没用,因为别人div id就是app,好苦恼!

webpack 引入vue,在vue中使用 mint-ui

在引入mint-ui 的文件和style.css 的时候,总是报下面的错误,不知道大神们怎么解决 ``` ERROR in ./node_modules/_mint-ui@1.0.2@mint-ui/lib/popup/style.css Module build failed: CssSyntaxError (2:1) Unknown word 1 | > 2 | var content = require("!!./style.css"); | ^ 3 | 4 | if(typeof content === 'string') content = [[module.id, content, '']]; @ ./node_modules/_mint-ui@1.0.2@mint-ui/lib/mint-ui.common.js 5052:18-56 @ ./src/main.js @ multi ./node_modules/_webpack-dev-server@2.11.3@webpack-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/main.js ```

vue 搭建项目的时候 失败

提示 :vue-cli · Failed to download repo vuejs-templates/webpack: tunneling socket could not be established, cause=socket hang up ![图片说明](https://img-ask.csdn.net/upload/201903/24/1553418661_213479.jpg) 请问,这个怎么解决啊?

vue项目build报错,请问是什么原因?

在网上下载的项目,使用npm run serve正常启动,但是用npm run build就会报下面的错误,刚接触vue,不是很懂,也问了同事,同事可以正常的打包,我用了跟他一样的node版本了,还是不行。 求大佬看看node版本是10.15.1 npm是6.4.1 ![图片说明](https://img-ask.csdn.net/upload/202002/27/1582776637_456359.jpg)

Vue2.0使用ElementUI的组件报错

问题截图: ![图片说明](https://img-ask.csdn.net/upload/201903/29/1553828313_461442.png) 问题描述: 编译工具webstorm,使用npm命令 dev运行项目报错。 搭建过程: 按照官方教程执行了 1.使用命令安装element组件 ``` npm i element-ui -S ``` 2.安装babel组件 ``` npm install babel-plugin-component -S ``` 3.main.js引用 ``` import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ElementUI); ``` 4.页面中使用element组件 ``` <template> <div>2</div> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </template> ``` .babelrc文件修改后报错,es2015,安装后无法使用,还原成系统默认配置。 以下为相关文件的具体内容: package.json ``` { "name": "vuetest3", "version": "1.0.0", "description": "A Vue.js project", "author": "811204266@qq.com <123456>", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs", "build": "node build/build.js" }, "dependencies": { "axios": "^0.18.0", "babel-polyfill": "^6.26.0", "vue": "^2.5.2", "vue-router": "^3.0.1" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^8.2.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-jest": "^21.0.2", "babel-loader": "^7.1.1", "babel-plugin-component": "^1.1.1", "babel-plugin-dynamic-import-node": "^1.2.0", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "chalk": "^2.0.1", "chromedriver": "^2.27.2", "copy-webpack-plugin": "^4.0.1", "cross-spawn": "^5.0.1", "css-loader": "^0.28.0", "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.0.0", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "jest": "^22.0.4", "jest-serializer-vue": "^0.3.0", "nightwatch": "^0.9.12", "node-notifier": "^5.1.2", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-url": "^7.2.1", "rimraf": "^2.6.0", "selenium-server": "^3.0.1", "semver": "^5.3.0", "shelljs": "^0.7.6", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-jest": "^1.0.2", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] } ``` 页面文件home.vue ``` <template> <div>2</div> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </template> <script> export default { name: 'home', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style scoped> </style> ``` 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' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ElementUI); /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) ``` router/index.js ``` import Vue from 'vue' import Router from 'vue-router' import Home from '@/page/Home' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home } ] }) ```

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

搜狗输入法也在挑战国人的智商!

故事总是一个接着一个到来...上周写完《鲁大师已经彻底沦为一款垃圾流氓软件!》这篇文章之后,鲁大师的市场工作人员就找到了我,希望把这篇文章删除掉。经过一番沟通我先把这篇文章从公号中删除了...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

2020阿里全球数学大赛:3万名高手、4道题、2天2夜未交卷

阿里巴巴全球数学竞赛( Alibaba Global Mathematics Competition)由马云发起,由中国科学技术协会、阿里巴巴基金会、阿里巴巴达摩院共同举办。大赛不设报名门槛,全世界爱好数学的人都可参与,不论是否出身数学专业、是否投身数学研究。 2020年阿里巴巴达摩院邀请北京大学、剑桥大学、浙江大学等高校的顶尖数学教师组建了出题组。中科院院士、美国艺术与科学院院士、北京国际数学...

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

程序员为什么千万不要瞎努力?

本文作者用对比非常鲜明的两个开发团队的故事,讲解了敏捷开发之道 —— 如果你的团队缺乏统一标准的环境,那么即使勤劳努力,不仅会极其耗时而且成果甚微,使用...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

《Oracle Java SE编程自学与面试指南》最佳学习路线图2020年最新版(进大厂必备)

正确选择比瞎努力更重要!

《Oracle Java SE编程自学与面试指南》最佳学习路线图(2020最新版)

正确选择比瞎努力更重要!

都前后端分离了,咱就别做页面跳转了!统统 JSON 交互

文章目录1. 无状态登录1.1 什么是有状态1.2 什么是无状态1.3 如何实现无状态1.4 各自优缺点2. 登录交互2.1 前后端分离的数据交互2.2 登录成功2.3 登录失败3. 未认证处理方案4. 注销登录 这是本系列的第四篇,有小伙伴找不到之前文章,松哥给大家列一个索引出来: 挖一个大坑,Spring Security 开搞! 松哥手把手带你入门 Spring Security,别再问密...

字节跳动面试官竟然问了我JDBC?

轻松等回家通知

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

阿里面试官让我用Zk(Zookeeper)实现分布式锁

他可能没想到,我当场手写出来了

终于,月薪过5万了!

来看几个问题想不想月薪超过5万?想不想进入公司架构组?想不想成为项目组的负责人?想不想成为spring的高手,超越99%的对手?那么本文内容是你必须要掌握的。本文主要详解bean的生命...

自从喜欢上了B站这12个UP主,我越来越觉得自己是个废柴了!

不怕告诉你,我自从喜欢上了这12个UP主,哔哩哔哩成为了我手机上最耗电的软件,几乎每天都会看,可是吧,看的越多,我就越觉得自己是个废柴,唉,老天不公啊,不信你看看…… 间接性踌躇满志,持续性混吃等死,都是因为你们……但是,自己的学习力在慢慢变强,这是不容忽视的,推荐给你们! 都说B站是个宝,可是有人不会挖啊,没事,今天咱挖好的送你一箩筐,首先啊,我在B站上最喜欢看这个家伙的视频了,为啥 ,咱撇...

代码注释如此沙雕,会玩还是你们程序员!

某站后端代码被“开源”,同时刷遍全网的,还有代码里的那些神注释。 我们这才知道,原来程序员个个都是段子手;这么多年来,我们也走过了他们的无数套路… 首先,产品经理,是永远永远吐槽不完的!网友的评论也非常扎心,说看这些代码就像在阅读程序员的日记,每一页都写满了对产品经理的恨。 然后,也要发出直击灵魂的质问:你是尊贵的付费大会员吗? 这不禁让人想起之前某音乐app的穷逼Vip,果然,穷逼在哪里都是...

立即提问
相关内容推荐