资讯专栏INFORMATION COLUMN

vue2.0项目引入element-ui

荆兆峰 / 2673人阅读

摘要:从新建项目到引入组件一新建项目查看和是不是已经安装好命令没有安装的先安装环境安装国内的淘宝镜像文件,后面的安装可以全部改为安装安装你的运行目录新建项目进入项目目录安装依赖运行项目发布项目注电脑需要在安装淘宝镜像前执行二

从新建vue项目到引入组件Element 一、新建项目
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
7.进入项目目录     cd vuedemo
8.安装依赖        cnpm install
9.运行项目        cnpm run dev
10.发布项目       cnpm run build
注:mac电脑需要在安装淘宝镜像前执行: sudo chown -R $USER /usr/local
二、使用element-ui前需安装的模块:
1. 安装 Element-UI 模块

   cnpm install element-ui --save 

三、引入Element,前面已经全局安装了element-ui,只需要在Vue项目中引入即可
 1、打开项目:src/main.js,添加下面三条
      import ElementUI from "element-ui"
   import "element-ui/lib/theme-chalk/index.css"
   Vue.use(ElementUI)

四、然后在.vue文件里就直接可以用了
例如:做一下修改,加入element-button按钮:

 
五、成功后的截图:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88374.html

相关文章

  • vue2.0项目引入element-ui

    摘要:从新建项目到引入组件一新建项目查看和是不是已经安装好命令没有安装的先安装环境安装国内的淘宝镜像文件,后面的安装可以全部改为安装安装你的运行目录新建项目进入项目目录安装依赖运行项目发布项目注电脑需要在安装淘宝镜像前执行二 从新建vue项目到引入组件Element 一、新建项目 1.查看 node和npm是不是已经安装好命令:node -v npm -v (没有安装的先安装环境); 2....

    GraphQuery 评论0 收藏0
  • Vue国际化处理 vue-i18n 以及项目自动切换中英文

    摘要:直接上预览链接国际化处理以及项目自动切换中英文环境搭建命令进入项目目录,执行以下命令安装国际化插件项目增加国际化翻译文件在项目的下添加文件夹增加中文翻译文件以及英文翻译文件,里面分别存储项目中需要翻译的信息。 0. 直接上 预览链接 Vue国际化处理 vue-i18n 以及项目自动切换中英文 1. 环境搭建 命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18n...

    wangtdgoodluck 评论0 收藏0
  • vue2.0+axios+mock+axios-mock+adapter实现登陆

    摘要:做项目过程中,需要用到后台模拟数据,在机缘巧合下发现了,在学习使用的过程中又偶遇了。 做项目过程中,需要用到后台模拟数据,在机缘巧合下发现了mock,在学习使用的过程中又偶遇了axios-mock-adapter。现在将实例展示如下: 准备 实例是建立在vue-cli的基础上实现需要提前安装的插件有:axios:npm install axio --savemockjs:npm ins...

    RancherLabs 评论0 收藏0
  • Vue2.0 + ElementUI 手写权限管理系统后台模板(一)——简述

    摘要:简介最近写了一个基于权限管理系统的后台模板,包含了正常项目开发所需的框架功能,开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。 简介 最近写了一个基于vue2.0+element-ui权限管理系统的后台模板,包含了正常项目开发所需的框架功能,开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。 源码地址...

    _ivan 评论0 收藏0
  • WEBPACK+VUE2.0开发请求本地模拟数据的配置方法

    摘要:在其的下面增加以下代码代码为在根目录下创建存放模拟的数据文件我命名为,名字可以根据自己口味定义,但是要跟第一步的配置依赖要一样。数据存放文件也需要更改为为请求的地址,为查询数据的入口请求请求欧了 早期在vue构建工程文件在build里面有dev-server.js,但是后来构建去除了该文件集成到了webpack的webpack.dev.conf.js里面。 在项目制作过程中,作为一个前...

    galaxy_robot 评论0 收藏0

发表评论

0条评论

荆兆峰

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<