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

2021-06-21 18:32:01 浏览数 (1)

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标签, 解决问题

vue.js elementui css node.js sass

0 人点赞