新建vue项目并引入element组件

àì夳堔傛蜴生んèń 2022-05-19 08:10 390阅读 0赞

从新建vue项目到引入组件Element

以及Error when rendering component报错解决

**一、新建项目**

1.打开cmd，运行：vue init webpack Vue-Demo

![Center][]

2.运行：cd Vue-Demo进入这一级

3.运行：npm install

4.运行：npm run dev

如果浏览器打开之后，没有加载出页面，说明本地的8080 端口被占用，需要修改一下配置文件 config/index.js

![Center 1][]

解释：1.将 build 的路径前缀修改为 ' ./ '（原本为 ' / '），是因为打包之后，外部引入 js 和 css 文件时，如果路

径以 ' / ' 开头，那么在本地是无法找到对应文件。所以如果需要在本地打开打包后的文件，

就得修改文件路径。

2.将端口号改为不常用的端口。

显示页面如下：

![Center 2][]

项目新建完成。

**二、引入Element**

1.打开cmd，在当前目录中运行：npm i element-ui -S

![Center 3][]

2.src/main.js（红色的）

// 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.然后在.vue文件里就直接可以用了**  
例如：在**src/components/Hello.vue**做一下修改

**\[html\]** [view plain][] [copy][view plain]

1.  <template>  
2.    <div class="hello">  
3.      <h1>\{ \{ msg \}\}</h1>  
4.      <h2>Essential Links</h2>  
5.      <el-button>默认按钮</el-button>  
6.      <el-button type="primary">主要按钮</el-button>  
7.      <el-button type="text">文字按钮</el-button>  
8.    </div>  
9.  </template>  
10.   
11. <script>  
12. export default \{  
13.   name: 'hello',  
14.   data () \{  
15.     return \{  
16.       msg: 'Welcome to Your Vue.js App'  
17.     \}  
18.   \}  
19. \}  
20. </script>  
21.   
22.   
23. <style scoped>  
24. h1, h2 \{  
25.   font-weight: normal;  
26. \}  
27.   
28. ul \{  
29.   list-style-type: none;  
30.   padding: 0;  
31. \}  
32.   
33. li \{  
34.   display: inline-block;  
35.   margin: 0 10px;  
36. \}  
37.   
38. a \{  
39.   color: \#42b983;  
40. \}  
41. </style>

**运行：****npm run dev**

你将看到如下页面：  
![Center 4][]  
成功的引入了Element!!  
更多样式请参考：http://element.eleme.io/\#/zh-CN/component/layout

ps:  
看了一些资料，有的引入之后会出现  
报错：Error when rendering component  
原因如下：  
Vue 2.1.5 将 \_h 重命名为 \_c，而 Element 目前发的版本都是用以前的 compiler 编译的，  
导致新版 runtime 无法运行 Element。目前的解决方案是锁定 Vue 的版本为 2.1.4  
锁定vue相关版本  
npm remove vue \#卸载相关的版本  
**重新安装一下版本**：  
"vue-template-compiler": "2.1.4"  
"vue-loader": "10.0.0"  
"vue": "2.1.4"

共勉~

[Center]: /images/20220519/a3c09c08d54e47d5a1d720c63d346d5b.png
[Center 1]: /images/20220519/1c91315583d14194924010aba256fa86.png
[Center 2]: /images/20220519/8d6c5619eebc460ba0c958431a01d846.png
[Center 3]: /images/20220519/9f089a532913456d990675dec848bc9a.png
[view plain]: http://blog.csdn.net/sangjinchao/article/details/58064767#
[Center 4]: /images/20220519/2ed8718a2d0a4bb8aae98701b6a991c0.png