From the new Vue project to the introduction of the component element process _vue

From the new Vue project to the introduction component element
and error when rendering component error resolution
First, new projects
1. Open cmd, run: Vue init webpack Vue-demo

2. Run: CD Vue-demo enter this level
3. Running: NPM Install
4. Running: npm Run dev
If the browser is open, the page has not been loaded, indicating that the local 8080 port is occupied and needs to modify the configuration file Config/index.js

Explanation: 1. Modify the build path prefix to './' (originally '/'), because after packaging, the external introduction of JS and CSS files, if the road
The path to '/' begins, then the corresponding file cannot be found locally. So if you need to open the packaged file locally,
You have to modify the file path.
2. Change the port number to a less-commonly used.

The display page is as follows:

New project completed.

Ii. Introduction of Element

1. Open cmd, run in current directory: NPM i element-ui-s

2.src/main.js (red)

The Vue build version to load and the ' Import ' command
//(runtime-only or standalone) has been set in Webpack.bas E.conf with an alias.
Import Vue from ' Vue ' to ' import App from '
./app '
import router from './router '
import elementui ' Element-ui '
import ' Element-ui/lib/theme-default/index.css '

Vue.config.productionTip = False/

* eslint-disable no-new/
vue.use (elementui)

new Vue ({
  el: ' #app ' ,
  router,
  Template: ' <App/> ',
  components: {App}
}

3. Then you can use it directly in the. vue file.
For example: Make a change in Src/components/hello.vue

<template>
  <div class= "Hello" >
    }
  }
</script>

<!--Add "scoped" attribute to limit CSS to this component only-->
  <style scoped>
H1, H2 {
  font-weight:normal;
}

UL {
  list-style-type:none;
  padding:0;
}

Li {
  display:inline-block;
  margin:0 10px;
}

A {
  color: #42b983;
}
</style>

Running: npm Run dev

You will see the following page:

Successful introduction of the element!!
More styles Please refer to: http://element.eleme.io/#/zh-CN/component/layout

Error: Error when rendering component

The reasons are as follows:
Vue 2.1.5 renames _h to _c, and the current version of the Element is compiled with previous compiler,
Causes the new runtime to not run Element. The current solution is to lock the Vue version to 2.1.4
Lock Vue Related version
NPM Remove Vue #卸载相关的版本
Reinstall version:

"Vue-template-compiler": "2.1.4"
"Vue-loader": "10.0.0"
"vue": "2.1.4"