Vue学习之如何安装与使用Element

最新推荐文章于 2023-11-26 19:39:14 发布

春风又一季

最新推荐文章于 2023-11-26 19:39:14 发布

阅读量271

点赞数

CC 4.0 BY-SA版权

分类专栏： vue前端技术 vue前端零碎

本文链接：https://blog.youkuaiyun.com/qq_40183281/article/details/86569491

vue前端零碎同时被 2 个专栏收录

15 篇文章

订阅专栏

vue前端技术

14 篇文章

订阅专栏

本文详细介绍如何使用Vue CLI和Webpack搭建Vue项目，包括环境配置、依赖安装、项目初始化、运行及发布流程，同时涵盖Element-UI组件库的引入和使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

建立项目
1.查看 node和npm是不是已经安装好命令：node -v npm -v (没有安装的先安装环境);
2.npm install -g cnpm --registry=https://registry.npm.taobao.org (安装国内的淘宝镜像文件，后面的安装npm可以全部改为cnpm)
3.安装 vue-cli
1、cnpm install -g vue
2、cnpm install -g vue-cli
4. 安装 webpack cnpm install -g webpack
5.cd 你的运行目录
6.新建vue项目 vue init webpack vuedemo 根据你的需求来选择Yes/No
项目名要小写
7.进入项目目录 cd vuedemo 例如我的项目名为aaa cd aaa
8.安装依赖 cnpm install
9.运行项目 cnpm run dev
10.发布项目 cnpm run build

1. 安装 loader 模块：
cnpm install style-loader -D
cnpm install css-loader -D
cnpm install file-loader -D
2. 安装 Element-UI 模块
cnpm install element-ui --save
npm install --save element-ui

在这里插入图片描述

  {
        test: /\\\\\\\\.css$/,
        loader: "style!css"
    },
    {
        test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
        loader: "file"
    }

1、打开项目：src/main.js,添加下面三条

   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   Vue.use(ElementUI)

例如：去官网找一下样式：

<template>
<div class="login">
 <i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
    </div>
</template>