社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
1.安装node.js
2.安装Vue-cli
3.创建项目
4.安装ElementUI
5.其他一些常用组件的安装
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 的开发环境已经搭建完毕，现在就可以编写代码了。
5.其他一些常用组件的安装
npm install echarts --save
在 main.js 中引入以下内容：
import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //引入组件
npm install font-awesome --save
在 main.js 中引入以下内容：
import 'font-awesome/css/font-awesome.min.css'
npm install sass-loader --save;
npm install sass-loader --save;
npm install --save axios
在 main.js 中引入以下内容：
Vue.prototype.$axios = axios;
扫描下方二维码，关注微信公众号，精彩内容同步更新
如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！
