专栏首页solate 杂货铺vue3+element-plus+router+vuex+axios从零开始搭建(1)vue3+element-plus

vue3+element-plus+router+vuex+axios从零开始搭建(1)vue3+element-plus

vue3+element-plus

因为需要一个后端管理系统的界面,所以学习从0开始搭建一个前端框架便于后续使用.

这一章主要是版本选择和基础安装功能。

代码会放到https://github.com/solate/vue-demo

安装步骤

下载

1.下载node, 不要使用最新的版本element-plus组件没支持到最新的版本。

brew install node

➜  ~ node -v
v14.17.0
➜  ~ npm -v
6.14.13

2.安装vue-cli,

vue-cli

npm install -g @vue/cli

如果太慢需要使用cnpm安装, 使用下面的命令安装cnpm

npm install -g cnpm -registry=https://registry.npm.taobao.org

版本信息

➜  ~ vue --version
@vue/cli 4.5.13

vue项目创建

vue create dashboard

选择自定义模式

多选vuex, router, css等,可以根据自己的需要添加

选择3.x,

最终选择

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallbackin production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

运行:

cd dashboard
npm run serve

vue 项目第一步就搭建完成了

element-plus

element-plus 是针对vue3的前端组件, 这里和2.x有些区别,需要vue-cli@4.5。

npm install element-plus --save

快速上手

在 main.js 中写入以下内容:

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
import App from "./App.vue";
import router from "./router";
import store from "./store";

const app = createApp(App);
app.use(ElementPlus);
app.use(store);
app.use(router);
app.mount("#app");

HelloWorld.vue中添加一个按钮

  <div class="hello">
    <el-button>默认按钮</el-button>
    ....其他代码
  </div>

然后运行项目, 结果如图

这样vue3和element-plus就都安装好了。

其他

修复问题

安装element-plus的时候提示有错误, 执行就修复好了

npm audit fix --force

element+vue2.x 的时候

开始安装ElementUI, 在cmd中打开vue项目文件夹,输入命令

    vue add element

选项选择

How do you want to import Element? Fully import  // 选择全局还是按需引入-全局
Do you wish to overwrite Element's SCSS variables? Yes  // 是否使用SCSS-是
Choose the locale you want to load zh-CN  // 选择语言-中文

出现了个问题:

Syntax Error: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (88)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1

Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime

然后根据搜索,解决node-sass版本问题。

npm uninstall --save node-sass
npm uninstall --save sass-loader

npm cache clean -f

npm install --save node-sass
npm install --save sass-loader

然后我的package.json中的版本是这样的

    "node-sass": "^5.0.0",
    "sass-loader": "^10.1.0",

node-sass解决了,然后启动后,整个界面是白色的,什么元素都没有,浏览器报错:prototype undefined,然后搜到下面这个。

vue-cli4创建项目导入elementUI,浏览器报错Uncaught TypeError: Cannot read property ‘prototype‘ of undefined

vue-cli4创建项目导入Element-UI踩过的坑

然后使用上面说的修改@vue/cli@3.12.1 但是不成功,所以选择了第一种方法

删除程序, 然后选择2.x版本修复问题。

vue.config.js 错误

然后发现 vue.config.js的错误

vue cli3及4使用官方方法配置scss全局变量报错

以前使用 data
版本 8 中使用 prependData
sass 版本 9 中使用 additionalData

最后改成这样

module.exports = {
  chainWebpack: config => {
    //设置别名
    config.resolve.alias.set("@", resolve("src"));
  },
  devServer: {
    open: true //打开浏览器窗口
  },
  //定义scss全局变量
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/scss/global.scss";`
      }
    }
  }
};

然后又有报错,继续解决

 error  in ./src/element-variables.scss

Syntax Error: SassError: File to import not found or unreadable: @/assets/scss/global.scss.
        on line 1 of src/element-variables.scss
>> @import "@/assets/scss/global.scss";

   ^

找不到这个文件,然后我修改为自动添加的这个scss文件

css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/element-variables.scss";`
      }
    }
  }

继续报错报错

Syntax Error: SassError: An @import loop has been found:
           src/element-variables.scss imports src/element-variables.scss
        on line 1 of src/element-variables.scss
>> /*

然后我复制一份放到/assets/scss/目录下,修改为

css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/scss/element-variables.scss";`
      }
    }
  }

成功出现el-buttion标签, 解决问题

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue3+element-plus+router+vuex+axios从零开始搭建(3)

    现在在store文件夹下面新建四个文件state.js, mutations.js, getters.js, actions.js

    solate
  • vue3+element-plus+router+vuex+axios从零开始搭建(2)

    vue-cli 3.0x与vue-cli 2.0x最主要的区别是项目结构目录精简化,这也带来了许多问题,很多配置需要自己配置,

    solate
  • Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践

    而且 Element Plus + Vite 也出了一段时间了,是时候该上手体验分享一波了。

    Sneaker-前端公虾米
  • Vue3发布半年我不学,摸鱼爽歪歪,哎~就是玩儿

    是从 Vue 2 开始学基础还是直接学 Vue 3 ?尤雨溪给出的答案是:“直接学 Vue 3 就行了,基础概念是一模一样的。”

    程序员十三
  • 这几款基于vue3和vite的开箱即用的中后台管理模版,让你yyds!

    我们都知道 vue3 已经发布一年多了,相关的生态也在慢慢建立,很多公司也在尝试用 vue3 来开发自己的应用系统。但是由于生态的不完善以及缺乏成熟方案的落地,...

    徐小夕
  • Vite开发快速入门

    Vite (法语意为 "快速的",发音 /vit/) 是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端的开发体验。除了Vite外,前端著名的...

    xiangzhihong
  • 10分钟简单的了解下 Vite 相关内容

    Vite已经出来很久了,新版本也比较稳定,有没有打算入手一下,推荐下面这篇文章。

    前端达人
  • 使用Vite2+TypeScript4+Vue3技术栈,如何入手开发项目

    已经两周没有发文了,自己临时有点事耽误了,在这里向大家表示深深地歉意。今天,我们使用vite2.0+vue3+ts来开发一个demo项目。

    用户3806669
  • 从 0 开始手把手带你搭建一套规范的 Vue3.x 工程化项目

    Vue3 跟 Vite 正式版发布有很长一段时间了,生态圈也渐渐丰富起来,作者已在多个项目中使用,总结一下:就是快!也不用担心稳定性问题,开发体验真不是一般好!...

    XPoet
  • Electron13+Vue3+ElementPlus模仿macOS桌面版后台系统框架

    electron-vue3-macOS 一款整合vite2.x+electron13跨平台构建模仿mac桌面UI后台管理系统。

    andy2018
  • 做个开源博客学习Vite2 + Vue3 (一)搭建项目

    不会 webpack,遇到报错就一头雾水,完全不知道怎么办,而且体积还大速度还慢。 所以尤雨溪做了 vite 后就很向往,只是知道自己水平有限还是等大佬先趟趟...

    用户1174620
  • 从 Vite 与 Vue 开始的 D3 数据可视化之旅

    这是一个极其简单的并尽可能面向未来的新手教程,它将指导你简单地使用 Vite 启动 Vue 的脚手架,并开始 D3 数据可视化的相关开发。而你无需 Vue 相关...

    云游君
  • 【建议收藏】缺少 Vue3 和 Spring Boot 的实战项目经验?我这儿有啊!

    缺少 Vue3 和 Spring Boot 的实战项目经验?缺少学习项目和练手项目?我这儿有啊!

    程序员十三
  • 整合vite2+electron12撸后台管理系统

    前一段时间有给大家分享一个Electron+Vue3.x短视频,今天再分享最新开发的Electron桌面端后台系统。

    andy2018
  • Vue3教程:Vue 3 + Element Plus + Vite 2 的后台管理系统开源啦

    之前发布过一篇文章《Vue3教程:开发一个 Vue 3 + element-plus 的后台管理系统》,文中提到会开发并开源一个 Vue 3 + Element...

    程序员十三
  • Vue3教程:开发一个 Vue 3 + element-plus 的后台管理系统

    最近在开发一个 Vue 3.0 + element-plus 练手项目,后面测试完成后,会把代码全部开源,部分页面的预览图如下:

    程序员十三
  • 每天学一点 Vue3(一) CND方式的安装以及简单使用 js脚本的引用方式数据绑定和UI库的使用Vuex状态管理的简单使用路由的简单使用

    感觉vue3的新特性很舒服,这样才是写软件的感觉嘛。打算用Vue实现自己的一些想法。

    用户1174620
  • vue-qiankun公司微前端项稳定目落地后的总结(附github仓库demo,将会持续更新)

    微前端的讲解概念和理论的文章非常多,这里我就不谈了,我讲的肯定没有他们好。同样的github上的demo也非常多,然后我在公司项目引入时还是发现了许多问题,可能...

    aehyok
  • 试水 element-plus ui 组件库

    上次逛知乎发现 element 之前的团队,已经将 element-plus 开发出来了,看来我们可以在 Vue3 接着使用 element 了,在我的心目中...

    公众号---人生代码

扫码关注云+社区

领取腾讯云代金券