Vue+ElementUI实战

最新推荐文章于 2023-03-15 21:56:03 发布

冷丁_

最新推荐文章于 2023-03-15 21:56:03 发布

阅读量847

点赞数

分类专栏： Vue精华讲解文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_41359998/article/details/123016330

版权

本文介绍了使用Vue CLI创建一个包含ElementUI的项目的过程。包括创建工程、安装依赖、创建视图组件、引入ElementUI代码、配置路由和解决项目运行中遇到的只读和sass-loader版本问题。

摘要由CSDN通过智能技术生成

Vue+ElementUI实战

使用之前创建vue-cli项目的方法
1.创建一个名为hi-vue的工程

vue init webpack hi-vue

2.安装依赖，我们需要安装element-ui、sass-loader和node-sass

# 进入工程目录
cd hello-vue
# 安装 element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev

在这里插入图片描述
3.在views创建Main.vue

<template>
  <h1>首页</h1>
</template>
<script>
  export default {
   
    name: "Main"
  }
</script>
<style scoped>
</style>

4.在views中创建Login.vue视图组件
搬一下ElementUI中的代码

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label=