在windows中搭建vue开发环境

最新推荐文章于 2024-10-17 20:58:50 发布

原创最新推荐文章于 2024-10-17 20:58:50 发布 · 692 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue #windows

本文介绍了在使用Vue和ElementUI进行项目开发时，如何正确进行环境搭建，包括VueCLI的初始化设置以及遇到的警告提示。同时，针对按钮样式不生效的问题，给出了在main.js中引入ElementUI并配置大小和zIndex的解决方案。

1.环境搭建

具体环境搭建步骤参考链接

注意该博客中初始化命令：

vue init webpack MyPortalProject

需改为小写：

vue init webpack myportalproject

不然会报错

Warning: name can no longer contain capital letters

2.创建第一个vue+element ui项目

创建项目过程参考链接

此博客中示例代码，运行后，按钮样式未生效，可在 main.js 中添加

Vue.use(ElementUI, {size:'mini', zIndex:1024})

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.use(ElementUI);

Vue.config.productionTip = false
Vue.use(ElementUI, {size:'mini', zIndex:1024})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})