【vue-elementUI项目学习】

一、检查环境

1.先安装Node.js

	[Node.js官网](https://nodejs.org/en/)

2. 将npm设置为淘宝镜像

npm config set registry https://registry.npm.taobao.org

3. 安装vue-cli

sudo npm install -g vue-cli

4. 查看vue 的版本 `

vue -V

二、创建项目

1.给定项目名

在webstorm的终端里直接输入下面代码，项目名可自定义

vue init webpack MyProject

2.一大堆配置

接下来会问一大堆Y/N的问题
注意下vue-router路由：可以实现页面跳转
ESlink 以下可以全部否掉
包管理我用的是NPM

三、启动项目

cd studyVue
npm run dev

然后提示进入网站vue的欢迎页面

四、elementUI 相关配置

ElementUI官网

1.引入依赖

在终端输入

npm i element-ui -S

2. 在项目中引入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false;
Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3. 报错处理

Module build failed: Error: No PostCSS Config found

node_modules_element-ui@2.13.0@element-ui\lib\theme-chalk中新建postcss.config.js，写入以下代码：

module.exports = {
    plugins: {
        'autoprefixer': {browsers: 'last 5 version'}
    }
}