脚本宝典收集整理的这篇文章主要介绍了

Vue

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p><strong>環境搭建</strong></p> <ul> <li>Win10下安裝NVM,利用NVM來管理Node.js的版本,切換淘寶源,安裝Node.js與NPM。</li> </ul> <p><strong>创建项目</strong></p> <ul> <li>命令行操作: 先 $npm install -g @vue/cli 再 $ vue ui</li> </ul> <p><strong>vue-router</strong> <br />在SPA中,路由是组件之间的切换,路由模块的本质是建立组件与页面之间的映射关系.SPA的路由是只更新视图而不重新请求页面.根据mode参数不同可以选择Hash模式和History模式.</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=" Hash模式: 默认模式,通过锚点值的改变,根据不同的值,渲染指定的DOM位置不同的数据.原理是通过onhaschange事件,监听Hash值的变化. History模式: 路由配置规则,添加&quot;mode:'history'&quot; " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs erlang"><code> Hash模式: 默认模式,通过锚点值的改变,根据不同的值,渲染指定的<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>位置不同的数据.原理是通过onhaschange事件,监听Hash值的变化. History模式: 路由配置规则,添加<span class="hljs-string">"mode:'history'"</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="//main.js const router = new VueRouter ({ mode: 'history', routes:[....] })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-comment">//main.js</span> <a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a> router = <span class="hljs-keyword">new</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>Router ({ <span class="hljs-string">mode:</span> <span class="hljs-string">'history'</span>, <span class="hljs-string">routes:</span>[....] })</code></pre> <p><strong>环境搭建</strong><br />环境搭建:Windows 10 专业版 + Node.js + NPM + Google Chrome + $npm i -g @vue/cli<br />项目创建:$vue create demo + $cd demo + $yarn serve + $vue ui <br /><strong><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> CLI 3</strong> 提供图形化界面,提供插件,<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> CLI有几个独立的部分组成:CLI是一个全局安装的npm包,提供终端的Vue命令.CLI服务是一个开发环境依赖,一个npm包,局部安装在每个@vue/cli创建的项目中,包含加载其他CLI插件的核心服务,一个优化过的内部webpack配置,项目内部的vu-cli-service命令,提供serve,build和Inspect命令.<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=" ├── node_modules # 项目依赖包目录 ├── public │ ├── favicon.ico # ico图标 │ └── index.html # 首页模板 ├── src │ ├── assets # 样式图片目录 │ ├── components # 组件目录 │ ├── views # 页面目录 │ ├── App.vue # 父组件 │ ├── main.js # 入口文件 │ ├── router.js # 路由配置文件 │ └── store.js # vuex状态管理文件 ├── .gitignore # git忽略文件 ├── .postcssrc.js # postcss配置文件 ├── babel.config.js # babel配置文件 ├── package.json # 包管理文件 └── yarn.lock # yarn依赖信息文件" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs cs"><code> ├── <a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_modules <span class="hljs-meta"># 项目依赖包目录</span> ├── <span class="hljs-keyword">public</span> │ ├── favicon.ico <span class="hljs-meta"># ico图标</span> │ └── index.html <span class="hljs-meta"># 首页模板</span> ├── src │ ├── assets <span class="hljs-meta"># 样式图片目录</span> │ ├── components <span class="hljs-meta"># 组件目录</span> │ ├── views <span class="hljs-meta"># 页面目录</span> │ ├── App.vue <span class="hljs-meta"># 父组件</span> │ ├── main.js <span class="hljs-meta"># 入口文件</span> │ ├── router.js <span class="hljs-meta"># 路由配置文件</span> │ └── store.js <span class="hljs-meta"># vuex状态管理文件</span> ├── .gitignore <span class="hljs-meta"># git忽略文件</span> ├── .postcssrc.js <span class="hljs-meta"># postcss配置文件</span> ├── <a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>.config.js <span class="hljs-meta"># babel配置文件</span> ├── package.json <span class="hljs-meta"># 包管理文件</span> └── yarn.<span class="hljs-keyword">lock</span> <span class="hljs-meta"># yarn依赖信息文件</span></code></pre> <ul> <li>CLI插件是向你的Vue项目提供可选的功能的npm包.起步: $yarn global add@vue/cli $vue create vuecli $vue ui列表项目</li> <li>快速原型开发,使用vue serve和vue build命令对单个*.vue文件进行快速原型开发,先$npm install -g @vue/cli-service-global目</li> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 652px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 652px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="652" height="163" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:652px;height:163px;"></iframe></ins></ins></ins></div> <li>vue serve 命令可以在零配置下为.js或.vue文件启动一个服务器 $serve -o;打开浏览器 $serve -c; 将本地URL复制到剪切板 $serve -h;帮助 例子:$vue serve hello.vue</li> <li>vue build $build -t;构建目标 $build -n;库的名字 $build -d;输出目录 $build -h;输出用法信息 例子:$vue vue build hello.vue</li> </ul> <p><strong>插件和Preset</strong></p> <ul> <li> <p>每个CLI插件都会包含一个(用于创建文件的)生成器和一个(用来调整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=" $vue add @vue/eslint " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs perl"><code> $vue add @vue/eslint </code></pre> </li> <li> <p>Vue CLI Preset是一个包含新项目所需要预定义选项的插件的JSON对象,让用户无需在命令提示中选择它们.</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-cli-service serve --open 在浏览器启动时打开浏览器 vue-cli-service serve --copy 在浏览器启东时讲URL复制到剪切板 vue-cli-service serve --mode 指定环境模式(默认值development) vue-cli-service serve --host 指定host vue-cli-service build --mode 指定环境模式 Vue Devtools" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>vue-cli-service serve <span class="hljs-comment">--open 在浏览器启动时打开浏览器</span> vue-cli-service serve <span class="hljs-comment">--copy 在浏览器启东时讲URL复制到剪切板</span> vue-cli-service serve <span class="hljs-comment">--mode 指定环境模式(默认值development)</span> vue-cli-service serve <span class="hljs-comment">--host 指定host</span> vue-cli-service build <span class="hljs-comment">--mode 指定环境模式</span> Vue Devtools</code></pre> </li> </ul> <p>## Vue学习顺序 ##</p> <ul> <li>扎实的<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>/<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>/JavaScript基本功.</li> <li>跟随官方教程基础篇/进阶篇.</li> <li>NVM/Node.js/Vue-cli/Vue-Router/Vuex</li> </ul> <h2 id="articleHeader0">Mock.js的使用</h2> <p>安装Mock.js $npm i Mockjs -s 在main.js的同级目录下创建一个Mock.js</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="const Mock = require('mockjs') Mock.mock('/register', function (options) { console.log(options) return Mock.mock({ 'number': '1' }) })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">const</span> Mock = <span class="hljs-built_in">require</span>(<span class="hljs-string">'mockjs'</span>) Mock.mock(<span class="hljs-string">'/register'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">options</span>) </span>{ <span class="hljs-built_in">console</span>.log(options) <span class="hljs-keyword">return</span> Mock.mock({ <span class="hljs-string">'number'</span>: <span class="hljs-string">'1'</span> }) })</code></pre> <p>在main.js中引用: require('./mock')</p> <h2 id="articleHeader1">Vue基础</h2> <p>Vue.js是一套构建用户界面的的渐进式框架,可以自定向上逐层应用.</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Vue

全部内容,希望文章能够帮你解决

Vue

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过