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;
posted @ 2018-10-23 23:08  sck_dream  阅读(1774)  评论(0编辑  收藏  举报