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 的开发环境已经搭建完毕,现在就可以编写代码了。

猜你喜欢

转载自www.cnblogs.com/zwliang/p/9840351.html
今日推荐