<p><code></p> <h2 id="articleHeader0">1.<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>是什么</h2> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的<strong>渐进式框架</strong>。</p> <p>其实,记住<em>渐进式</em>进行了,如果要跟深入的了解,应该到<a href="https://cn.vuejs.org/v2/guide/index.html" rel="nofollow noreferrer" target="_blank">官网</a>看看。</p> <h2 id="articleHeader1">2.搭建环境</h2> <h3 id="articleHeader2">2-1 使用vue-cli创建项目</h3> <blockquote> <p>依赖 Node 和 npm</p> </blockquote> <p>首先,全局安装<code>vue-cli</code>:</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 install --g vue-cli" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">$ npm install --g vue-cli</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="$ vue init webpack testvue ? Project name (testvue) ==> 确定<br /> ? Project description (A Vue.js project) ==> 确定<br /> ? Author (...) ==> 确定<br /> ? Vue build standalone ==> 确定<br /> ? Install vue-router? No ==> n<br /> ? Use ESLint to lint your code? Yes ==> y<br /> ? Pick an ESLint preset ==> none<br /> ? Setup unit tests with Karma + Mocha? No ==> n<br /> ? Setup e2e tests with Nightwatch? No ==> n" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">$ vue init webpack testvue ? Project name (testvue) ==&gt; 确定 ? Project description (A <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.js project) ==&gt; 确定 ? Author (...) ==&gt; 确定 ? Vue build standalone ==&gt; 确定 ? Install vue-router? No ==&gt; n ? Use ESLint to lint your code? Yes ==&gt; y ? Pick an ESLint preset ==&gt; none ? Setup unit tests with Karma + Mocha? No ==&gt; n ? Setup e2e tests with Nightwatch? No ==&gt; n</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="$ cd testvue $ npm install" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">$ <span class="hljs-built_in">cd</span> testvue $ npm install</code></pre> <p>清空src目录,并创建两个文件<code>main.js</code>和<code>App.vue</code>:</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="$ cd src &amp;&amp; rm -f -r * $ touch main.js &amp;&amp; touch App.vue" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">$ <span class="hljs-built_in">cd</span> src &amp;&amp; rm -f -r * $ touch main.js &amp;&amp; touch App.vue</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="// main.js 程序的入口 import Vue from 'vue' import App from './App' new Vue({ render: h => h(App)<br /> }).$mount('#app')" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// main.js 程序的入口</span> <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> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span> <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-params">h</span> =&gt;</span> h(App) }).$mount(<span class="hljs-string">'#app'</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="<template></p> <div id=&quot;app&quot;> {{name}} </div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'app', data() { return { name: 123 } } } </script></p> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: left; color: #2c3e50; margin-top: 60px; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code class="vue"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <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> {{name}} <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"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'app'</span>, data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">name</span>: <span class="hljs-number">123</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-id">#app</span> { <span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Avenir'</span>, Helvetica, Arial, sans-serif; <span class="hljs-attribute">-webkit-font-smoothing</span>: antialiased; <span class="hljs-attribute">-moz-osx-font-smoothing</span>: grayscale; <span class="hljs-attribute">text-align</span>: left; <span class="hljs-attribute">color</span>: <span class="hljs-number">#2c3e50</span>; <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">60px</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <h3 id="articleHeader3">2-2 配置eslint进行语法检查</h3> <p>首先,在项目中安装<code>eslint</code>:</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 install --save-dev eslint" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">$ npm install --save-dev eslint</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 install --save-dev eslint-plugin-babel eslint-config-vue eslint-plugin-vue" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">$ npm install --save-dev eslint-plugin-<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a> eslint-config-vue eslint-plugin-vue</code></pre> <p>修改<code>.eslintrc.js</code>文件:</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="module.exports = { &quot;parser&quot;: &quot;babel-eslint&quot;, &quot;extends&quot;: [ &quot;vue&quot; ], &quot;plugins&quot;: [ &quot;babel&quot; ], &quot;env&quot;: { &quot;browser&quot;: true }, &quot;rules&quot;: { &quot;semi&quot;: [2, &quot;never&quot;], &quot;max-len&quot;: [2, 300, 2], &quot;generator-star-spacing&quot;: 0, &quot;space-before-function-paren&quot;: 0 } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-built_in">module</span>.exports = { <span class="hljs-string">"parser"</span>: <span class="hljs-string">"babel-eslint"</span>, <span class="hljs-string">"extends"</span>: [ <span class="hljs-string">"vue"</span> ], <span class="hljs-string">"plugins"</span>: [ <span class="hljs-string">"babel"</span> ], <span class="hljs-string">"env"</span>: { <span class="hljs-string">"browser"</span>: <span class="hljs-literal">true</span> }, <span class="hljs-string">"rules"</span>: { <span class="hljs-string">"semi"</span>: [<span class="hljs-number">2</span>, <span class="hljs-string">"never"</span>], <span class="hljs-string">"max-len"</span>: [<span class="hljs-number">2</span>, <span class="hljs-number">300</span>, <span class="hljs-number">2</span>], <span class="hljs-string">"generator-star-spacing"</span>: <span class="hljs-number">0</span>, <span class="hljs-string">"space-before-function-paren"</span>: <span class="hljs-number">0</span> } }</code></pre> <h3 id="articleHeader4">2-3 配置 Vue Devtools</h3> <ol> <li> <a href="https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd" rel="nofollow noreferrer" target="_blank">打开插件网址</a>(需要翻墙)</li> <li>点击<strong>添加到Chrome</strong> </li> <li>在弹出的窗口中,点击<strong>添加扩展程序</strong> </li> <li>在谷歌人员开发工具中打开<strong>Vue</strong>面板</li> <li>在谷歌开发人员工具中通过 ESC 切换 Console 控制台的显示</li> </ol> <h3 id="articleHeader5">2-4 运行程序</h3> <p>现在,准备工作已经准备好了,可以执行程序了。执行之前,先在<code>App.vue</code>中放一些测试数据:</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="<template></p> <div id=&quot;app&quot;> 测试数据 </div> <p></template>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code class="vue"><span class="hljs-tag">&lt;<span class="hljs-name">template</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">template</span>&gt;</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 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> <h2 id="articleHeader6">3.总结</h2> <p>现在,学习环境已经搭建完成了。以后代码没有特殊指明,都是在 App.vue 中进行书写。</p> <p>Vue生命周期很重要,写了一篇关于Vue生命周期的文章,文章地址:<a href="https://segmentfault.com/a/1190000011486619">Vue的生命周期</a></p> <p>本篇笔记对应Vue官网:</p> <ul> <li><a href="https://cn.vuejs.org/v2/guide/installation.html" rel="nofollow noreferrer" target="_blank">安装</a></li> <li><a href="https://cn.vuejs.org/v2/guide/index.html" rel="nofollow noreferrer" target="_blank">介绍</a></li> <li><a href="https://cn.vuejs.org/v2/guide/instance.html" rel="nofollow noreferrer" target="_blank">Vue实例</a></li> </ul> <p></code></p>

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