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

其他一些常用组件的安装

1.Echarts安装

npm install echarts --save

import echarts from 'echarts' //引入echarts

Vue.prototype.$echarts = echarts //引入组件

 

2.font-awesome字体

npm install font-awesome --save

import 'font-awesome/css/font-awesome.min.css'

 

3.sass-loader 和 sass-loader

npm install sass-loader --save;

npm install sass-loader --save;

4.axios

npm install --save axios

Vue.prototype.$axios = axios;