Detailed Description: from creating a vue project to introducing component elements, vueelement

Detailed Description: from creating a vue project to introducing component elements, vueelement

This article describes how to resolve errors from creating a vue project to introducing components Element and Error when rendering component.

1. Create a project

1. Open cmd and run:vue init webpack Vue-Demo

2. Run:cd Vue-DemoEnter this level
3. Run:npm install
4. Run:npm run dev

If the page is not loaded after the browser is opened, the local port 8080 is occupied. You need to modify the configuration file config/index. js.

Explanation:1. Change the build path prefix to './' (originally '/') because after packaging, when js and css files are introduced externally

If the path starts with '/', the corresponding file cannot be found locally. Therefore, if you need to open the packaged file locally,

You have to modify the file path.

2. Change the port number to an uncommon port.

The displayed page is as follows:

The project is created.

Ii. Introduce Element

1. Open cmd and run: npm I element-ui-S in the current directory.

2. src/main. js (red)

// 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-default/index.css'Vue.config.productionTip = false/* eslint-disable no-new */Vue.use(ElementUI)new Vue({ el: '#app', router, template: '<App/>', components: { App }})

3. You can use it directly in the. vue file.

For example, modify src/components/Hello. vue.

<Template> <div class = "hello"> 

Run:npm run dev
You will see the following page:

Element is introduced successfully !!

For more information, see: http://element.eleme.io/#/zh-CN/component/layout
Ps:

After reading some documents, some of them will appear

Error: Error when rendering component

The reason is as follows:

Vue 2.1.5 rename _ h to _ c, and the current versions of the Element are compiled by compiler, so that the new runtime version cannot run the Element. The current solution is to lock Vue version 2.1.4

Lock vue-related versions

Npm remove vue # uninstall related versions

Reinstall the version:

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

 
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.