前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue3+element-plus+router+vuex+axios从零开始搭建(1)vue3+element-plus

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

作者头像
solate
发布2021-06-21 18:32:01
2.8K0
发布2021-06-21 18:32:01
举报
文章被收录于专栏:solate 杂货铺

vue3+element-plus

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

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

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

安装步骤

下载

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

代码语言:javascript
复制
brew install node

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

2.安装vue-cli,

vue-cli

代码语言:javascript
复制
npm install -g @vue/cli

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

代码语言:javascript
复制
npm install -g cnpm -registry=https://registry.npm.taobao.org

版本信息

代码语言:javascript
复制
➜  ~ vue --version
@vue/cli 4.5.13

vue项目创建

代码语言:javascript
复制
vue create dashboard

选择自定义模式

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

选择3.x,

最终选择

代码语言:javascript
复制
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)

运行:

代码语言:javascript
复制
cd dashboard
npm run serve

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

element-plus

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

代码语言:javascript
复制
npm install element-plus --save

快速上手

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

代码语言:javascript
复制
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中添加一个按钮

代码语言:javascript
复制
  <div class="hello">
    <el-button>默认按钮</el-button>
    ....其他代码
  </div>

然后运行项目, 结果如图

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

其他

修复问题

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

代码语言:javascript
复制
npm audit fix --force

element+vue2.x 的时候

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

代码语言:javascript
复制
    vue add element

选项选择

代码语言:javascript
复制
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  // 选择语言-中文

出现了个问题:

代码语言:javascript
复制
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版本问题。

代码语言:javascript
复制
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中的版本是这样的

代码语言:javascript
复制
    "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全局变量报错

代码语言:javascript
复制
以前使用 data
版本 8 中使用 prependData
sass 版本 9 中使用 additionalData

最后改成这样

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

然后又有报错,继续解决

代码语言:javascript
复制
 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文件

代码语言:javascript
复制
css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/element-variables.scss";`
      }
    }
  }

继续报错报错

代码语言:javascript
复制
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/目录下,修改为

代码语言:javascript
复制
css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/scss/element-variables.scss";`
      }
    }
  }

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • vue3+element-plus
    • 安装步骤
      • 下载
      • vue项目创建
      • element-plus
    • 其他
      • 修复问题
      • element+vue2.x 的时候
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档