ElementUI环境搭建

Posted zwliang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ElementUI环境搭建相关的知识,希望对你有一定的参考价值。

1.node.js安装

官网上下载node.js安装包,直接安装即可。安装完后查看nodejs版本:node -v.

出现以下信息说明安装成功。

$ node -v

v8.12.0

2.安装vue-cli

输入命令npm install vue-cli -g

在mac下可能会出现如下错误: 

npm ERR! The operation was rejected by your operating system.

npm ERR! It is likely you do not have the permissions to access this file as the current user

 

该错误是因为root权限问题,解决方式很简单,在命令前加sudo即可,即输入命令:sudo npm install vue-cli -g

 

安装完成后,查看vue-cli版本信息,以确定是否安装成功,输入命令:vue -V   (注意:V 要大写)

出现以下信息说明安装成功

$ vue -V

2.9.6

 

3.创建项目

cd到需要创建项目的文件夹,运行命令 vue init webpack my-project   (my-project为项目名称)

? Project name my-project

? Project description 测试项目

? Author

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? Set up unit tests No

? Setup e2e tests with Nightwatch? No

? Should we run `npm install` for you after the project has been created? (recom

mended) no

 

   vue-cli · Generated "my-project".

 

# Project initialization finished!

# ========================

 

To get started:

 

  cd my-project

  npm install (or if using yarn: yarn)

  npm run lint -- --fix (or for yarn: yarn run lint --fix)

  npm run dev

  

Documentation can be found at https://vuejs-templates.github.io/webpack

 

4.ElementUI安装

推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

 

安装完ElementUI包以后,将Element引入到项目中。

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

import Vue from ‘vue‘;
import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;
import App from ‘./App.vue‘;

Vue.use(ElementUI);

new Vue({
  el: ‘#app‘,
  render: h => h(App)
});

以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单独引入。


至此,一个基于 Vue 和 Element 的开发环境已经搭建完毕,现在就可以编写代码了。



以上是关于ElementUI环境搭建的主要内容,如果未能解决你的问题,请参考以下文章

ElementUI环境搭建

vue及ElementUI环境搭建

从零开始搭建自己的VueJS2.0+ElementUI单页面网站(环境搭建)

从零开始搭建自己的VueJS2.0+ElementUI单页面网站(环境搭建)

spring练习,在Eclipse搭建的Spring开发环境中,使用set注入方式,实现对象的依赖关系,通过ClassPathXmlApplicationContext实体类获取Bean对象(代码片段

一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI