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 的开发环境已经搭建完毕,现在就可以编写代码了。
其他一些常用组件的安装
npm install sass-loader --save;
npm install sass-loader --save;
4.axios