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

Vue-cli浅入浅出

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">搭建环境</h1> <p>工欲善其事必先利其器,我们的学习计划从学会搭建<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>所需要的环境开始,<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>和npm的环境不用说是必须的,现在前端流程化很热门,基本上新的技术都会在这套流程的基础上做开发,我们只需要站在巨人的XX上装*就可以了。我假设你的机子上已经有了最新的<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>和npm了,那我们就只需要执行以下命令:</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="hljs sql"><code style="word-break: break-word; white-space: initial;">$ npm <span class="hljs-keyword">install</span> -g vue-cli</code></pre> <p>构建完了之后,随便进入一个我们事先准备好的目录,比如demo目录,然后在目录中做初始化操作:</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 vue-cli-demo" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs shell"><code style="word-break: break-word; white-space: initial;"><span class="hljs-meta">$</span><span class="bash"> vue init webpack vue-cli-demo</span></code></pre> <p><code>webpack</code>参数是指<code>vue-cli-demo</code>这个项目将会在开发和完成阶段帮你自动打包代码,比如将<code>js</code>文件统一合成一个文件,将<code><a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a></code>文件统一合并压缩等。</p> <p><code>init</code>(初始化)的过程中会问你给项目定义一些描述,版本之类的信息,可以不管,一直输入y确定跳过,完成之后出现以下界面,部分会提示你接下来要做的操作,按照它的提示继续敲代码就对了。<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 i -S axios vue-axios" 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 -S ax<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a> vue-axios</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="cd vue-cli-demo npm install npm run dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">cd</span> <span class="hljs-string">vue-cli-demo</span> <span class="hljs-attr">npm</span> <span class="hljs-string">install</span> <span class="hljs-attr">npm</span> <span class="hljs-string">run dev</span></code></pre> <p>npm install 是安装项目所需要的依赖,简单理解就是安装一些必要的插件,需要等一段时间;</p> <blockquote> <p>同样也可以使用 <code>yarn</code><br />npm run dev 是开始执行我们的项目了,一旦执行这个命令之后,等一小会,浏览器应该会自动帮你打开一个tab为<a href="http://localhost" rel="nofollow noreferrer" target="_blank">http://localhost</a>:8080/#/或者<a href="http://127.0.0.1" rel="nofollow noreferrer" target="_blank">http://127.0.0.1</a>:8080/#/的链接,这个链接就是我们本地开发的项目主页了,如果没有,说明出错了。请移步到评论区回复吧。。。</p> </blockquote> <h1 id="articleHeader1">生成的文件</h1> <p>看看<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>都给我们生成一些什么文件:</p> <ul> <li> <p>yarn npm包管理工具(facebook)</p> </li> <li> <p>README.md 通常所有项目的说明文件</p> </li> <li> <p>package.json 维护包管理的配置文件,包括版本</p> </li> <li> <p>index.html 首页</p> </li> <li> <p>.postcssrc.js postcss的配置</p> </li> <li> <p>.gitignore git的忽略文件列表</p> </li> <li> <p>.eslintrc.js 代码检查配置文件</p> </li> <li> <p>.eslintignore 代码检查忽略文件</p> </li> <li> <p>.editorconfig 编辑器的配置文件</p> </li> <li> <p>.<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>rc <a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>的配置文件</p> </li> <li> <p>static 网站的静态资源</p> </li> <li> <p>src 源代码</p> </li> <li> <p>src/assets 资源(可以预处理)</p> </li> <li> <p>src/components 组件目录</p> </li> <li> <p>src/router 路由</p> </li> <li> <p>src/App.vue 根组件</p> </li> <li> <p>src/main.js 入口文件</p> </li> <li> <p>config 配置目录</p> </li> <li> <p>build 构建工具相关</p> </li> <li> <p>test 测试目录</p> </li> <li> <p>test/unit 单元测试</p> </li> <li> <p>test/e2e 端对端测试</p> </li> <li> <p>dist 打包后的目标代码</p> </li> </ul> <blockquote> <p>这其中我们需要关注的是以下文件</p> </blockquote> <p>package.json保存一些依赖信息,config保存一些项目初始化配置,build里面保存一些webpack的初始化配置,index.html是我们的首页,除了这些,最关键的代码都在src目录中,index在很多服务器语言中都是预设为首页,像index.htm,index.php等;打开build目录中的webpack.base.conf.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="module.exports = { entry: { app: './src/main.js' } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs java"><code><span class="hljs-keyword">module</span>.<span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s</span> = { entry: { app: <span class="hljs-string">'./src/main.js'</span> } }</code></pre> <p>说明我们的入口js文件在src目录中的main.js,接下来我们就分析下这些初始化代码先;</p> <h1 id="articleHeader2">跟着代码走</h1> <p><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>的核心架构,按照官方解释和个人理解,主要在于组件和路由两大模块,只要理解了这两大模块的思想内容,剩下<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>使用就只是分分钟的事情了。</p> <blockquote> <p>因是潜入我们只关注src里的文件即可开发简单应用</p> </blockquote> <p>首先是<code>src</code>下的<code>main.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="// 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 Ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a> from 'axios'<br /> import VueAxios from 'vue-axios'<br /> Vue.use(VueAxios, Axios)</p> <p>Vue.config.productionTip = false</p> <p>/* eslint-disable no-new */<br /> new Vue({<br /> el: '#app',<br /> router,<br /> template: '<App></span>',<br /> components: { App }<br /> })<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>// The Vue build version to <span class="hljs-keyword">load</span> <span class="hljs-keyword">with</span> the <span class="hljs-string">`import`</span> command // (runtime-<span class="hljs-keyword">only</span> <span class="hljs-keyword">or</span> <span class="hljs-keyword">standalone</span>) has been <span class="hljs-keyword">set</span> <span class="hljs-keyword">in</span> webpack.base.conf <span class="hljs-keyword">with</span> an alias. <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">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span> <span class="hljs-keyword">import</span> Axios <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span> <span class="hljs-keyword">import</span> VueAxios <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-axios'</span> Vue.use(VueAxios, Axios) Vue.config.productionTip = <span class="hljs-literal">false</span> <span class="hljs-comment">/* eslint-disable no-new */</span> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, router, <span class="hljs-keyword">template</span>: <span class="hljs-string">'&lt;App/&gt;'</span>, components: { App } }) </code></pre> <h2 id="articleHeader3">先是第一句</h2> <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'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span></code></pre> <p>这句很好理解,就像你要引入<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a>一样,vue就是jquery-min.js,然后Vue就是$;然后又引入了./App文件,也就是目录中和main.js同级的App.vue文件;在Vue中引入文件可以直接用import,文件后缀名可以是.vue,这是Vue自己的文件类型,之前说的webpack会将js和css文件打包,同样的道理,在webpack中配置vue插件后(项目默认配置),webpack就可以将.vue类型的文件整合打包,这和nodeJs中require差不多的道理。同样类似于&lt;script&gt;加载其他文件</p> <h2 id="articleHeader4">第二句</h2> <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 App from './App' import router from './router'//引入路由备置" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span> <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span><span class="hljs-comment">//引入路由备置</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="import Vue from 'vue' import App from './App'/*引入App这个组件*/ import router from './router'/*引入路由配置*/ import Axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, Axios) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app',/*最后效果将会替换页面中id为app的<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>元素*/<br /> router,/*使用路由*/<br /> template: '<App></span>',/*告知页面这个组件用这样的标签来包裹着,并且使用它*/<br /> components: { App }/*告知当前页面想使用App这个组件*/<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><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-comment">/*引入App这个组件*/</span> <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span><span class="hljs-comment">/*引入路由配置*/</span> <span class="hljs-keyword">import</span> Axios <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span> <span class="hljs-keyword">import</span> VueAxios <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-axios'</span> Vue.use(VueAxios, Axios) Vue.config.productionTip = <span class="hljs-literal">false</span> <span class="hljs-comment">/* eslint-disable no-new */</span> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>,<span class="hljs-comment">/*最后效果将会替换页面中id为app的<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>元素*/</span> router,<span class="hljs-comment">/*使用路由*/</span> template: <span class="hljs-string">'&lt;App/&gt;'</span>,<span class="hljs-comment">/*告知页面这个组件用这样的标签来包裹着,并且使用它*/</span> components: { App }<span class="hljs-comment">/*告知当前页面想使用App这个组件*/</span> })</code></pre> <p><code>Vue.config.productionTip = false</code>阻止生产提示出现<br /><code>/* eslint-disable no-new */</code>阻止eslint检测以下代码的格式</p> <h1 id="articleHeader5">单页面组件</h1> <p>好了,现在打开我们的App.vue文件,在Vue中,官网叫它做组件,单页面的意思是结构,样式,逻辑代码都写在同一个文件中,当我们引入这个文件后,就相当于引入对应的结构、样式和JS代码,这不就是我们做前端组件化最想看到的吗,从前的asp、php也有这样的文件思想。</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;> <img src=&quot;./assets/logo.png&quot;>//从src中的assets资源包中获取资源图片<br /> <router-view></router-view>//输出端口 </div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'app'//只有在调用自身时,使用 }//渲染页面 </script></p> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><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">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./assets/logo.png"</span>&gt;</span>//从src中的assets资源包中获取资源图片 <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</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> { <span class="hljs-attr">name</span>: <span class="hljs-string">'app'</span><span class="hljs-comment">//只有在调用自身时,使用</span> }<span class="hljs-comment">//渲染页面</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>: center; <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> <p>同时涉及到路由</p> <h1 id="articleHeader6">路由</h1> <p>&lt;router-view&gt;&lt;/router-view&gt;</p> <p>这句代码在页面中放入一个路由视图容器,当我们访问<a href="http://localhost" rel="nofollow noreferrer" target="_blank">http://localhost</a>:8080/#/about/的时候会将about的内容放进去,访问<a href="http://localhost" rel="nofollow noreferrer" target="_blank">http://localhost</a>:8080/#/recruit的时候会将recruit的内容放进去</p> <p>前面说的src/main.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="import router from './router'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span></code></pre> <p>现在就让我们打开<code>router</code>目录下的<code>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="import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/Hello'//@别名相当于src Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: HelloWorld } ] })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><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> Router <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span> <span class="hljs-keyword">import</span> HelloWorld <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/Hello'</span><span class="hljs-comment">//@别名相当于src</span> Vue.use(Router) <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Router({ routes: [ { path: <span class="hljs-string">'/'</span>, name: <span class="hljs-string">'Hello'</span>, component: HelloWorld } ] })</code></pre> <p>前面先引入了路由插件<code>vue-router</code>,然后显式声明要用路由 <code>Vue.use(Router)</code> 。注意到Hello,About等都是页面(也可以是组件),接着注册路由器,然后开始配置路由。</p> <p>路由的配置应该一目了然,给不同的path分配不同的页面(或组件,页面和组件其实是一样的概念),name参数不重要只是用来做识别用的。看到这里就可以明白,前面说的红色框的内容,其实就是Hello里面的内容,打开<code>components</code>目录下的<code>HelloWorld.vue</code>就能明白了。</p> <p><span class="img-wrap"><img data-src="/img/bVYCiX?w=632&amp;h=609" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <h1 id="articleHeader7">build文件夹和config文件夹浅讲</h1> <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="// build for production with minification //构建产品压缩 npm run build //build for production and view the bundle analyzer report //构建产品并查看包分析器报告 npm run build --report" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>// build for production <span class="hljs-keyword">with</span> minification //构建产品压缩 npm run <span class="hljs-keyword">build</span> //<span class="hljs-keyword">build</span> <span class="hljs-keyword">for</span> production <span class="hljs-keyword">and</span> <span class="hljs-keyword">view</span> the bundle analyzer report //构建产品并查看包分析器报告 npm run <span class="hljs-keyword">build</span> <span class="hljs-comment">--report</span></code></pre> <p><code>config</code>判断是否上线,加载的资源不同</p> <h1 id="articleHeader8">总结下前面讲的内容先:</h1> <ul> <li> <p>搭建环境</p> </li> <li> <p>代码逻辑</p> </li> <li> <p>单页面组件(简单带过)</p> </li> <li> <p>路由</p> </li> <li> <p>子路由</p> </li> </ul> <p>以上的流程就是我们刚开始接触Vue时候的简单介绍,在之前就说过学习Vue能掌握组件和路由的基本概念之后,对于我们后续了解他的工作机制有着很大的帮助,本篇章我们只是简单介绍了单页面组件。</p> <p></code></p>

总结

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

Vue-cli浅入浅出

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

Vue-cli浅入浅出

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

80%的人都看过