<h3 id="articleHeader0">element框架搭建</h3> <p>从朋友那里听说了element,就想着写个小demo,顺道学习vue,但是木有想到搭建框架就遇到了一堆问题<br />,不过还好,看了官网大家提问的问题,找到了解决办法。</p> <h4>安装</h4> <p>推荐使用 npm 的方式安装,它能更好地和webpack打包工具配合使用。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm i element-ui -D" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">npm</span> i element-ui -D</code></pre> <h4>项目结构</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="|- src/ --------------------- 项目源代码 |- App.vue |- main.js -------------- 入口文件 |- .babelrc ----------------- babel 配置文件 |- index.html --------------- HTML 模板 |- package.json ------------- npm 配置文件 |- README.md ---------------- 项目帮助文档 |- webpack.config.js -------- webpack 配置文件" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>|- src/ <span class="hljs-comment">--------------------- 项目源代码</span> |- App.vue |- main.js <span class="hljs-comment">-------------- 入口文件</span> |- .<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>rc <span class="hljs-comment">----------------- babel 配置文件</span> |- index.html <span class="hljs-comment">--------------- <a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a> 模板</span> |- <span class="hljs-built_in">package</span>.json <span class="hljs-comment">------------- npm 配置文件</span> |- README.md <span class="hljs-comment">---------------- 项目帮助文档</span> |- webpack.<span class="hljs-built_in">config</span>.js <span class="hljs-comment">-------- webpack 配置文件</span></code></pre> <h4>package.json</h4> <p><strong>注意</strong>对package.json中的scripts的理解</p> <p>一个由脚本命令组成的hash对象,他们在包不同的生命周期中被执行。key是生命周期事件,value是要运行的命令。<br />我们可以使用</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm run dev #webpack 的--inline --hot 起作用的原因就是配置了scrips" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">npm</span> run dev <span class="hljs-comment">#webpack 的--inline --hot 起作用的原因就是配置了scrips</span></code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="{ &quot;name&quot;: &quot;element-starter&quot;, &quot;description&quot;: &quot;A Vue.js project&quot;, &quot;author&quot;: &quot;yi.shyang@ele.me&quot;, &quot;private&quot;: true, &quot;scripts&quot;: { &quot;dev&quot;: &quot;cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 1314&quot;, &quot;build&quot;: &quot;cross-env NODE_ENV=production webpack --progress --hide-modules&quot; }, &quot;dependencies&quot;: { &quot;element-ui&quot;: &quot;^1.0.0&quot;, &quot;vue&quot;: &quot;^2.1.4&quot; }, &quot;devDependencies&quot;: { &quot;babel-core&quot;: &quot;^6.0.0&quot;, &quot;babel-loader&quot;: &quot;^6.0.0&quot;, &quot;babel-preset-es2015&quot;: &quot;^6.13.2&quot;, &quot;cross-env&quot;: &quot;^1.0.6&quot;, &quot;css-loader&quot;: &quot;^0.23.1&quot;, &quot;file-loader&quot;: &quot;^0.8.5&quot;, &quot;style-loader&quot;: &quot;^0.13.1&quot;, &quot;vue-loader&quot;: &quot;^9.8.0&quot;, &quot;webpack&quot;: &quot;beta&quot;, &quot;webpack-dev-server&quot;: &quot;beta&quot; } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs json"><code>{ <span class="hljs-attr">"name"</span>: <span class="hljs-string">"element-starter"</span>, <span class="hljs-attr">"description"</span>: <span class="hljs-string">"A <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.js project"</span>, <span class="hljs-attr">"author"</span>: <span class="hljs-string">"yi.shyang@ele.me"</span>, <span class="hljs-attr">"private"</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">"scripts"</span>: { <span class="hljs-attr">"dev"</span>: <span class="hljs-string">"cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 1314"</span>, <span class="hljs-attr">"build"</span>: <span class="hljs-string">"cross-env NODE_ENV=production webpack --progress --hide-modules"</span> }, <span class="hljs-attr">"dependencies"</span>: { <span class="hljs-attr">"element-ui"</span>: <span class="hljs-string">"^1.0.0"</span>, <span class="hljs-attr">"vue"</span>: <span class="hljs-string">"^2.1.4"</span> }, <span class="hljs-attr">"devDependencies"</span>: { <span class="hljs-attr">"babel-core"</span>: <span class="hljs-string">"^6.0.0"</span>, <span class="hljs-attr">"babel-loader"</span>: <span class="hljs-string">"^6.0.0"</span>, <span class="hljs-attr">"babel-preset-es2015"</span>: <span class="hljs-string">"^6.13.2"</span>, <span class="hljs-attr">"cross-env"</span>: <span class="hljs-string">"^1.0.6"</span>, <span class="hljs-attr">"css-loader"</span>: <span class="hljs-string">"^0.23.1"</span>, <span class="hljs-attr">"file-loader"</span>: <span class="hljs-string">"^0.8.5"</span>, <span class="hljs-attr">"style-loader"</span>: <span class="hljs-string">"^0.13.1"</span>, <span class="hljs-attr">"vue-loader"</span>: <span class="hljs-string">"^9.8.0"</span>, <span class="hljs-attr">"webpack"</span>: <span class="hljs-string">"beta"</span>, <span class="hljs-attr">"webpack-dev-server"</span>: <span class="hljs-string">"beta"</span> } }</code></pre> <h4>webpack.config.js</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, module: { loaders: [ { test: /.vue$/, loader: 'vue-loader' }, { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /.css$/, loader: 'style-loader!css-loader' }, { test: /.(eot|svg|ttf|woff|woff2)(?S*)?$/, loader: 'file-loader' }, { test: /.(png|jpe?g|gif|svg)(?S*)?$/, loader: 'file-loader', query: { name: '[name].[ext]?[hash]' } } ] }, devServer: { historyApiFallback: true, noInfo: true }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '&quot;production&quot;' } }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ]) } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">var</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>) <span class="hljs-keyword">var</span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">'webpack'</span>) <span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { entry: <span class="hljs-string">'./src/main.js'</span>, output: { path: path.resolve(__dirname, <span class="hljs-string">'./dist'</span>), publicPath: <span class="hljs-string">'/dist/'</span>, filename: <span class="hljs-string">'build.js'</span> }, <span class="hljs-keyword">module</span>: { loaders: [ { test: <span class="hljs-regexp">/.vue$/</span>, loader: <span class="hljs-string">'vue-loader'</span> }, { test: <span class="hljs-regexp">/.js$/</span>, loader: <span class="hljs-string">'babel-loader'</span>, exclude: <span class="hljs-regexp">/<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_modules/</span> }, { test: <span class="hljs-regexp">/.css$/</span>, loader: <span class="hljs-string">'style-loader!css-loader'</span> }, { test: <span class="hljs-regexp">/.(eot|svg|ttf|woff|woff2)(?S*)?$/</span>, loader: <span class="hljs-string">'file-loader'</span> }, { test: <span class="hljs-regexp">/.(png|jpe?g|gif|svg)(?S*)?$/</span>, loader: <span class="hljs-string">'file-loader'</span>, query: { name: <span class="hljs-string">'[name].[ext]?[hash]'</span> } } ] }, devServer: { historyApiFallback: <span class="hljs-literal">true</span>, noInfo: <span class="hljs-literal">true</span> }, devtool: <span class="hljs-string">'#eval-source-map'</span> } <span class="hljs-keyword">if</span> (process.env.NODE_ENV === <span class="hljs-string">'production'</span>) { <span class="hljs-built_in">module</span>.exports.devtool = <span class="hljs-string">'#source-map'</span> <span class="hljs-comment">// http://vue-loader.<a href="http://www.js-code.com/tag/vuejs" title="浏览关于“vuejs”的文章" target="_blank" class="tag_link">vuejs</a>.org/en/workflow/production.html</span> <span class="hljs-built_in">module</span>.exports.plugins = (<span class="hljs-built_in">module</span>.exports.plugins || []).concat([ <span class="hljs-keyword">new</span> webpack.DefinePlugin({ <span class="hljs-string">'process.env'</span>: { NODE_ENV: <span class="hljs-string">'"production"'</span> } }), <span class="hljs-keyword">new</span> webpack.optimize.UglifyJsPlugin({ compress: { warnings: <span class="hljs-literal">false</span> } }) ]) } </code></pre> <h4>main.js</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' import App from './App.vue' Vue.use(ElementUI) new Vue({ el: '#app', render: h => h(App)<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> ElementUI <span class="hljs-keyword">from</span> <span class="hljs-string">'element-ui'</span> <span class="hljs-keyword">import</span> <span class="hljs-string">'element-ui/lib/theme-default/index.css'</span> <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App.vue'</span> Vue.use(ElementUI) <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>, <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-params">h</span> =&gt;</span> h(App) })</code></pre> <h4>App.vue</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div id=&quot;app&quot;> <img src=&quot;./assets/logo.png&quot;></p> <h1>{{ msg }}</h1> <p> <el-button @click.native=&quot;startHacking&quot;>Let's do it</el-button> </div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data () { return { msg: 'Use <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 2.0 Today!' } },</p> <p> methods: { startHacking () { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$notify({ title: 'It Works', message: 'We have laid the groundwork for you. Now it's your time to build something epic!', duration: 6000 }) } } } </script></p> <style> body { font-family: Helvetica, sans-serif; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;template&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./assets/logo.png"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{{ msg }}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> @<span class="hljs-attr">click.native</span>=<span class="hljs-string">"startHacking"</span>&gt;</span>Let's do it<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">msg</span>: <span class="hljs-string">'Use Vue 2.0 Today!'</span> } }, <span class="hljs-attr">methods</span>: { startHacking () { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$notify({ <span class="hljs-attr">title</span>: <span class="hljs-string">'It Works'</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">'We have laid the groundwork for you. Now it's your time to build something epic!'</span>, <span class="hljs-attr">duration</span>: <span class="hljs-number">6000</span> }) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-tag">body</span> { <span class="hljs-attribute">font-family</span>: Helvetica, sans-serif; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></span></code></pre> <h4>index.html</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;utf-8&quot;><br /> <title>element-starter</title><br /> </head><br /> <body></p> <div id=&quot;app&quot;></div> <p> <script src=&quot;dist/build.js&quot;></script><br /> </body><br /> </html><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>element-starter<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"dist/build.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span> </code></pre> <h4>运行</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ npm run dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">$ npm run dev</code></pre> <h4>编译</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ npm run build" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">$ npm run build</code></pre> <h4>遇到的问题 _vm._h is not a function</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="vue.runtime.common.js?d43f:519 [<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> warn]: Error when rendering component <ElButton>: warn @ vue.runtime.common.js?d43f:519Vue._render @ vue.runtime.common.js?d43f:2959(anonymous function) @ vue.runtime.common.js?d43f:2189get @ vue.runtime.common.js?d43f:1652Watcher @ vue.runtime.common.js?d43f:1644Vue._mount @ vue.runtime.common.js?d43f:2188Vue$2.$mount @ vue.runtime.common.js?d43f:5978init @ vue.runtime.common.js?d43f:2500createComponent @ vue.runtime.common.js?d43f:4052createElm @ vue.runtime.common.js?d43f:3995createChildren @ vue.runtime.common.js?d43f:4103createElm @ vue.runtime.common.js?d43f:4028patch @ vue.runtime.common.js?d43f:4446Vue._update @ vue.runtime.common.js?d43f:2215(anonymous function) @ vue.runtime.common.js?d43f:2189get @ vue.runtime.common.js?d43f:1652Watcher @ vue.runtime.common.js?d43f:1644Vue._mount @ vue.runtime.common.js?d43f:2188Vue$2.$mount @ vue.runtime.common.js?d43f:5978init @ vue.runtime.common.js?d43f:2500createComponent @ vue.runtime.common.js?d43f:4052createElm @ vue.runtime.common.js?d43f:3995patch @ vue.runtime.common.js?d43f:4483Vue._update @ vue.runtime.common.js?d43f:2215(anonymous function) @ vue.runtime.common.js?d43f:2189get @ vue.runtime.common.js?d43f:1652Watcher @ vue.runtime.common.js?d43f:1644Vue._mount @ vue.runtime.common.js?d43f:2188Vue$2.$mount @ vue.runtime.common.js?d43f:5978initRender @ vue.runtime.common.js?d43f:2916Vue._init @ vue.runtime.common.js?d43f:3296Vue$2 @ vue.runtime.common.js?d43f:3343(anonymous function) @ main.js?3479:8(anonymous function) @ build.js:1092__webpack_require__ @ build.js:658fn @ build.js:84(anonymous function) @ build.js:1734__webpack_require__ @ build.js:658(anonymous function) @ build.js:705(anonymous function) @ build.js:708<br /> vue.runtime.common.js?d43f:2961 Uncaught TypeError: _vm._h is not a function<br /> at Proxy.render (eval at <anonymous> (http://localhost:1314/dist/build.js:1301:1), <anonymous>:6130:46)<br /> at VueComponent.Vue._render (eval at <anonymous> (http://localhost:1314/dist/build.js:820:1), <anonymous>:2952:22)<br /> at VueComponent.eval (eval at <anonymous> (http://localhost:1314/dist/build.js:820:1), <anonymous>:2189:21)<br /> at Watcher.get (eval at <anonymous> (http://localhost:1314/dist/build.js:820:1), <anonymous>:1652:27)<br /> at new Watcher (eval at <anonymous> (http://localhost:1314/dist/build.js:820:1), <anonymous>:1644:12)<br /> at VueComponent.Vue._mount (eval at <anonymous> (http://localhost:1314/dist/build.js:820:1), <anonymous>:2188:19)<br /> at VueComponent.Vue$2.$mount (eval at <anonymous> (http://localhost:1314/dist/build.js:820:1), <anonymous>:5978:15)<br /> at init (eval at <anonymous> (http://localhost:1314/dist/build.js:820:1), <anonymous>:2500:11)<br /> at createComponent (eval at <anonymous> (http://localhost:1314/dist/build.js:820:1), <anonymous>:4052:9)<br /> at createElm (eval at <anonymous> (http://localhost:1314/dist/build.js:820:1), <anonymous>:3995:9)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code>vue.runtime.common.js?d43f:<span class="hljs-number">519</span> [Vue warn]: Error when rendering component &lt;ElButton&gt;: warn @ vue.runtime.common.js?d43f:<span class="hljs-number">519</span>Vue._render @ vue.runtime.common.js?d43f:<span class="hljs-number">2959</span>(anonymous function) @ vue.runtime.common.js?d43f:<span class="hljs-number">2189</span>get @ vue.runtime.common.js?d43f:<span class="hljs-number">1652</span>Watcher @ vue.runtime.common.js?d43f:<span class="hljs-number">1644</span>Vue._mount @ vue.runtime.common.js?d43f:<span class="hljs-number">2188</span>Vue$<span class="hljs-number">2.</span>$mount @ vue.runtime.common.js?d43f:<span class="hljs-number">5978</span>init @ vue.runtime.common.js?d43f:<span class="hljs-number">2500</span>createComponent @ vue.runtime.common.js?d43f:<span class="hljs-number">4052</span>createElm @ vue.runtime.common.js?d43f:<span class="hljs-number">3995</span>createChildren @ vue.runtime.common.js?d43f:<span class="hljs-number">4103</span>createElm @ vue.runtime.common.js?d43f:<span class="hljs-number">4028</span>patch @ vue.runtime.common.js?d43f:<span class="hljs-number">4446</span>Vue._update @ vue.runtime.common.js?d43f:<span class="hljs-number">2215</span>(anonymous function) @ vue.runtime.common.js?d43f:<span class="hljs-number">2189</span>get @ vue.runtime.common.js?d43f:<span class="hljs-number">1652</span>Watcher @ vue.runtime.common.js?d43f:<span class="hljs-number">1644</span>Vue._mount @ vue.runtime.common.js?d43f:<span class="hljs-number">2188</span>Vue$<span class="hljs-number">2.</span>$mount @ vue.runtime.common.js?d43f:<span class="hljs-number">5978</span>init @ vue.runtime.common.js?d43f:<span class="hljs-number">2500</span>createComponent @ vue.runtime.common.js?d43f:<span class="hljs-number">4052</span>createElm @ vue.runtime.common.js?d43f:<span class="hljs-number">3995</span>patch @ vue.runtime.common.js?d43f:<span class="hljs-number">4483</span>Vue._update @ vue.runtime.common.js?d43f:<span class="hljs-number">2215</span>(anonymous function) @ vue.runtime.common.js?d43f:<span class="hljs-number">2189</span>get @ vue.runtime.common.js?d43f:<span class="hljs-number">1652</span>Watcher @ vue.runtime.common.js?d43f:<span class="hljs-number">1644</span>Vue._mount @ vue.runtime.common.js?d43f:<span class="hljs-number">2188</span>Vue$<span class="hljs-number">2.</span>$mount @ vue.runtime.common.js?d43f:<span class="hljs-number">5978</span>initRender @ vue.runtime.common.js?d43f:<span class="hljs-number">2916</span>Vue._init @ vue.runtime.common.js?d43f:<span class="hljs-number">3296</span>Vue$<span class="hljs-number">2</span> @ vue.runtime.common.js?d43f:<span class="hljs-number">3343</span>(anonymous function) @ main.js?3479:<span class="hljs-number">8</span>(anonymous function) @ build.<span class="hljs-string">js:</span><span class="hljs-number">1092</span>__webpack_require__ @ build.<span class="hljs-string">js:</span><span class="hljs-number">658</span>fn @ build.<span class="hljs-string">js:</span><span class="hljs-number">84</span>(anonymous function) @ build.<span class="hljs-string">js:</span><span class="hljs-number">1734</span>__webpack_require__ @ build.<span class="hljs-string">js:</span><span class="hljs-number">658</span>(anonymous function) @ build.<span class="hljs-string">js:</span><span class="hljs-number">705</span>(anonymous function) @ build.<span class="hljs-string">js:</span><span class="hljs-number">708</span> vue.runtime.common.js?d43f:<span class="hljs-number">2961</span> Uncaught <span class="hljs-string">TypeError:</span> _vm._h is not a function at Proxy.render (eval at &lt;anonymous&gt; (<span class="hljs-string">http:</span><span class="hljs-comment">//localhost:1314/dist/build.js:1301:1), &lt;anonymous&gt;:6130:46)</span> at VueComponent.Vue._render (eval at &lt;anonymous&gt; (<span class="hljs-string">http:</span><span class="hljs-comment">//localhost:1314/dist/build.js:820:1), &lt;anonymous&gt;:2952:22)</span> at VueComponent.eval (eval at &lt;anonymous&gt; (<span class="hljs-string">http:</span><span class="hljs-comment">//localhost:1314/dist/build.js:820:1), &lt;anonymous&gt;:2189:21)</span> at Watcher.get (eval at &lt;anonymous&gt; (<span class="hljs-string">http:</span><span class="hljs-comment">//localhost:1314/dist/build.js:820:1), &lt;anonymous&gt;:1652:27)</span> at <span class="hljs-keyword">new</span> Watcher (eval at &lt;anonymous&gt; (<span class="hljs-string">http:</span><span class="hljs-comment">//localhost:1314/dist/build.js:820:1), &lt;anonymous&gt;:1644:12)</span> at VueComponent.Vue._mount (eval at &lt;anonymous&gt; (<span class="hljs-string">http:</span><span class="hljs-comment">//localhost:1314/dist/build.js:820:1), &lt;anonymous&gt;:2188:19)</span> at VueComponent.Vue$<span class="hljs-number">2.</span>$mount (eval at &lt;anonymous&gt; (<span class="hljs-string">http:</span><span class="hljs-comment">//localhost:1314/dist/build.js:820:1), &lt;anonymous&gt;:5978:15)</span> at init (eval at &lt;anonymous&gt; (<span class="hljs-string">http:</span><span class="hljs-comment">//localhost:1314/dist/build.js:820:1), &lt;anonymous&gt;:2500:11)</span> at createComponent (eval at &lt;anonymous&gt; (<span class="hljs-string">http:</span><span class="hljs-comment">//localhost:1314/dist/build.js:820:1), &lt;anonymous&gt;:4052:9)</span> at createElm (eval at &lt;anonymous&gt; (<span class="hljs-string">http:</span><span class="hljs-comment">//localhost:1314/dist/build.js:820:1), &lt;anonymous&gt;:3995:9)</span></code></pre> <p>解决方法</p> <p>Vue 2.1.5 将 _h 重命名为 _c,而 Element 目前发的版本都是用以前的 compiler 编译的,导致新版 runtime 无法运行 Element。目前的解决方案是锁定 Vue 的版本为 2.1.4</p> <p>锁定vue相关版本</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="# 重新安装一下版本 &quot;vue-template-compiler&quot;: &quot;2.1.4&quot; &quot;vue-loader&quot;: &quot;10.0.0&quot; &quot;vue&quot;: &quot;2.1.4&quot;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code><span class="hljs-meta"># 重新安装一下版本</span> <span class="hljs-string">"vue-template-compiler"</span>: <span class="hljs-string">"2.1.4"</span> <span class="hljs-string">"vue-loader"</span>: <span class="hljs-string">"10.0.0"</span> <span class="hljs-string">"vue"</span>: <span class="hljs-string">"2.1.4"</span></code></pre> <p>具体命令如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm remove # 卸载某个版本 npm remove vue npm remove vue-template-compiler npm remove vue-loader npm install vue@2.1.4 #安装指定版本 npm install vue-template-compiler@2.1.4 npm install vue-loader@10.0.0" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code><span class="hljs-built_in">npm</span> remove <span class="hljs-comment"># 卸载某个版本</span> <span class="hljs-built_in">npm</span> remove vue <span class="hljs-built_in">npm</span> remove vue-template-compiler <span class="hljs-built_in">npm</span> remove vue-loader <span class="hljs-built_in">npm</span> install vue@<span class="hljs-number">2.1</span><span class="hljs-number">.4</span> <span class="hljs-comment">#安装指定版本</span> <span class="hljs-built_in">npm</span> install vue-template-compiler@<span class="hljs-number">2.1</span><span class="hljs-number">.4</span> <span class="hljs-built_in">npm</span> install vue-loader@<span class="hljs-number">10.0</span><span class="hljs-number">.0</span></code></pre> <h3 id="articleHeader1">参考资料</h3> <ul> <li> <p><a href="https://github.com/yuanyuanshen/element-demo" rel="nofollow noreferrer" target="_blank">框架代码</a></p> </li> <li> <p><a href="http://element.eleme.io/" rel="nofollow noreferrer" target="_blank">element官网</a></p> </li> <li> <p><a href="https://github.com/ElemeFE/element/issues" rel="nofollow noreferrer" target="_blank">element的github地址</a></p> </li> <li> <p><a href="https://github.com/ericdum/mujiang.info/issues/6/" rel="nofollow noreferrer" target="_blank">package.json配置项的理解</a></p> </li> </ul> <h3 id="articleHeader2">坚持</h3> <p>准备使用element做一个网站的前端,希望自己能坚持下去。。。</p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_17186.html