windows10下安装Vue.js的方法

最新推荐文章于 2023-02-04 22:53:33 发布

Mighty_soldiers

最新推荐文章于 2023-02-04 22:53:33 发布

阅读量928

点赞数

分类专栏： JS 数据库基础文章标签： win10下安装Vue.js的方法

JS 同时被 2 个专栏收录

6 篇文章

订阅专栏

数据库基础

3 篇文章

订阅专栏

<link href="https://csdnimg.cn/public/favicon.ico" rel="SHORTCUT ICON">
<title>windows10下安装Vue.js的方法 - 冰水zzy的博客 - 优快云博客</title>

    
                <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/detail-c278e9b7fe.min.css">
        
        <script type="application/ld+json">{"@context":"https:\/\/ziyuan.baidu.com\/contexts\/cambrian.jsonld","@id":"https:\/\/blog.youkuaiyun.com\/zzy123654321\/article\/details\/79191331","appid":"1563894916825412","title":"windows10\u4e0b\u5b89\u88c5Vue.js\u7684\u65b9\u6cd5 - \u51b0\u6c34zzy\u7684\u535a\u5ba2","images":["https:\/\/img-blog.youkuaiyun.com\/20180129101029262?watermark\/2\/text\/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenp5MTIzNjU0MzIx\/font\/5a6L5L2T\/fontsize\/400\/fill\/I0JBQkFCMA==\/dissolve\/70\/gravity\/SouthEast"],"pubDate":"2019-07-26T15:32:48"}</script>
    
        <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/themes/skin3-template/skin3-template-9b39979775.min.css">
    <script type="text/javascript">
    var username = "zzy123654321";
    var blog_address = "https://blog.youkuaiyun.com/zzy123654321";
    var static_host = "https://csdnimg.cn/release/phoenix/";
    var currentUserName = "Mighty_soldiers";
    var isShowAds = true;
    var isOwner = false;
    var loginUrl = "http://passport.youkuaiyun.com/account/login?from=https://blog.youkuaiyun.com/zzy123654321/article/details/79191331"
    var blogUrl = "https://blog.youkuaiyun.com/";

    var curSkin = "skin3-template";
    // 收藏所需数据
    var articleTitle = "windows10下安装Vue.js的方法";
    var articleDesc = "一，Vue.js简介    Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。    本文的主";
    // 第四范式所需数据
    var articleTitles = "windows10下安装Vue.js的方法 - 冰水zzy的博客";
    
    var nickName = "冰水zzy";
    var isCorporate = false;
    var subDomainBlogUrl = "https://blog.youkuaiyun.com/"
    var digg_base_url = "https://blog.youkuaiyun.com/zzy123654321/phoenix/comment";
    var articleDetailUrl = "https://blog.youkuaiyun.com/zzy123654321/article/details/79191331";
</script>
<script src="https://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="//g.csdnimg.cn/??fixed-sidebar/1.1.3/fixed-sidebar.js,report/1.0.3/report.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://csdnimg.cn/public/sandalstrap/1.4/css/sandalstrap.min.css">
<style>
    .MathJax, .MathJax_Message, .MathJax_Preview{
        display: none
    }
</style>

原

windows10下安装Vue.js的方法

2018年01月29日 10:15:33 冰水zzy 阅读数 5396

                    版权声明：本文为博主原创文章，未经博主允许不得转载。                        https://blog.youkuaiyun.com/zzy123654321/article/details/79191331                    </div>
                                                <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-3019150162.css" />
                                    <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-3019150162.css" />
            <div class="htmledit_views" id="content_views">

一，Vue.js简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

本文的主要内容是如何在windows10环境下正确安装Vue.js并运行项目。

二，安装的node.js

访问node.js官网https://nodejs.org/en/，下载最新版本node，根据提示安装。

安装成功之后，通过运行打开命令行程序的cmd.exe，输入命令

node -v

安装成功之后，通过运行打开命令行程序的cmd.exe，输入命令若安装成功，则会显示对应版本号。

在下载的node.js的的同时，计算机会安装npm包管理器，输入命令

npm -v

若安装成功，会显示出npm的版本信息

三，安装cnpm

由于使用npm安装插件是从国外服务器上获取的，国内使用会出现下载速度较慢，下载失败等问题，因此我们可以使用npm的国内镜像--cnpm。

在cmd.exe中输入命令

npm install cnpm -g --registry = https://registry.npm.taobao.org

等待安装完成，我们就可以使用cnpm代替npm管理安装包了。

关于cnpm，若想了解更多，请访问淘宝团队官方网址http://npm.taobao.org

四，安装Vue-cli

在cmd.exe中输入命令

npm install -g vue-cli

等待完成

五，构建项目

在CMD.EXE中将目录移动至选定目录，即项目创建的位置。

在选定目录下输入命令

vue init webpack Vue//Vue为项目文件夹的名称

在选定目录下输入命令之后按照提示输入项目名称，描述，作者等信息。

创建的项目文件夹如图所示

六，运行项目

将位置移动至项目目录，输入命令

npm install

npm run dev

等待加载完成，打开浏览器，输入localhost：8080，若运行成功，则会显示以下页面

        <div class="hide-article-box hide-article-pos text-center">
        <a class="btn-readmore" data-report-view='{"mod":"popu_376","dest":"https://blog.youkuaiyun.com/zzy123654321/article/details/79191331","strategy":"readmore"}' data-report-click='{"mod":"popu_376","dest":"https://blog.youkuaiyun.com/zzy123654321/article/details/79191331","strategy":"readmore"}'>
            展开阅读全文
            <svg class="icon chevrondown" aria-hidden="true">
                <use xlink:href="#csdnc-chevrondown"></use>
            </svg>
        </a>
    </div>

    <div id="dmp_ad_58"><div id="kp_box_58" data-pid="58" data-track-view='{"mod":"kp_popu_58-386","con":",,"}' data-track-click='{"mod":"kp_popu_58-386","con":",,"}' data-report-view='{"mod":"kp_popu_58-386","keyword":""}' data-report-click='{"mod":"kp_popu_58-386","keyword":""}'><div style="width:100%;background:#fff;">

<div class="comment-edit-box d-flex">
	<a id="commentsedit"></a>
	<div class="user-img">
		<a href="//me.youkuaiyun.com/Mighty_soldiers" target="_blank">
			<img class="" src="https://avatar.youkuaiyun.com/7/9/F/3_mighty_soldiers.jpg">
		</a>
	</div>
	<form id="commentform">
		<input type="hidden" id="comment_replyId">
		<textarea class="comment-content" name="comment_content" id="comment_content" placeholder="想对作者说点什么"></textarea>
		<div class="opt-box"> <!-- d-flex -->
			<div id="ubbtools" class="add_code">
				<a href="#insertcode" code="code" target="_self"><i class="icon iconfont icon-daima"></i></a>
			</div>
			<input type="hidden" id="comment_replyId" name="comment_replyId">
			<input type="hidden" id="article_id" name="article_id" value="79191331">
			<input type="hidden" id="comment_userId" name="comment_userId" value="">
			<input type="hidden" id="commentId" name="commentId" value="">
			<div style="display: none;" class="csdn-tracking-statistics tracking-click" data-report-click='{"mod":"popu_384","dest":""}'><a href="#" target="_blank" class="comment_area_btn">发表评论</a></div>
			<div class="dropdown" id="myDrap">
				<a class="dropdown-face d-flex align-items-center" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
				<div class="txt-selected text-truncate">添加代码片</div>
				<svg class="icon d-block" aria-hidden="true">
					<use xlink:href="#csdnc-triangledown"></use>
				</svg>
				</a>
				<ul class="dropdown-menu" id="commentCode" aria-labelledby="drop4">
					<li><a data-code="html">HTML/XML</a></li>
					<li><a data-code="objc">objective-c</a></li>
					<li><a data-code="ruby">Ruby</a></li>
					<li><a data-code="php">PHP</a></li>
					<li><a data-code="csharp">C</a></li>
					<li><a data-code="cpp">C++</a></li>
					<li><a data-code="javascript">JavaScript</a></li>
					<li><a data-code="python">Python</a></li>
					<li><a data-code="java">Java</a></li>
					<li><a data-code="css">CSS</a></li>
					<li><a data-code="sql">SQL</a></li>
					<li><a data-code="plain">其它</a></li>
				</ul>
			</div>  
			<div class="right-box">
				<span id="tip_comment" class="tip">还能输入<em>1000</em>个字符</span>
				<input type="button" class="btn btn-sm btn-cancel d-none" value="取消回复">
				<input type="submit" class="btn btn-sm btn-red btn-comment" value="发表评论">
			</div>
		</div>
	</form>
</div>

	<div class="comment-list-container">
	<a id="comments"></a>
	<div class="comment-list-box">
	</div>
	<div id="commentPage" class="pagination-box d-none"></div>
	<div class="opt-box text-center">
		<div class="btn btn-sm btn-link-blue" id="btnMoreComment"></div>
	</div>
</div>

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_59" data-pid="59" data-track-view='{"mod":"kp_popu_59-78","con":",,"}' data-track-click='{"mod":"kp_popu_59-78","con":",,"}' data-report-view='{"mod":"kp_popu_59-78","keyword":""}' data-report-click='{"mod":"kp_popu_59-78","keyword":""}'><script type="text/javascript">
(function() {
    var s = "_" + Math.random().toString(36).slice(2);
    document.write('<div style="" id="' + s + '"></div>');
    (window.slotbydup = window.slotbydup || []).push({
        id: "u3491668",
        container:  s
    });
})();

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_60" data-pid="60" data-track-view='{"mod":"kp_popu_60-43","con":",,"}' data-track-click='{"mod":"kp_popu_60-43","con":",,"}' data-report-view='{"mod":"kp_popu_60-43","keyword":""}' data-report-click='{"mod":"kp_popu_60-43","keyword":""}'><div id="three_ad8" class="mediav_ad" ></div>

		<div class="recommend-item-box blog-expert-recommend-box">
		<div class="d-flex">
			<div class="blog-expert-recommend">
				<div class="blog-expert">
					<div class="blog-expert-flexbox"></div>
				</div>
			</div>
		</div>
	</div>

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_61" data-pid="61" data-track-view='{"mod":"kp_popu_61-622","con":",,"}' data-track-click='{"mod":"kp_popu_61-622","con":",,"}' data-report-view='{"mod":"kp_popu_61-622","keyword":""}' data-report-click='{"mod":"kp_popu_61-622","keyword":""}'><script type="text/javascript" src="//rabc1.iteye.com/common/web/production/79m9.js?f=aszggcwz"></script></div></div>

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_62" data-pid="62" data-track-view='{"mod":"kp_popu_62-1062","con":",,"}' data-track-click='{"mod":"kp_popu_62-1062","con":",,"}' data-report-view='{"mod":"kp_popu_62-1062","keyword":""}' data-report-click='{"mod":"kp_popu_62-1062","keyword":""}'><iframe  src="https://kunpeng-sc.csdnimg.cn/#/preview/237?positionId=62&queryWord=" frameborder="0" width= "100%"  height= "75px" scrolling="no" ></iframe></div></div>

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_63" data-pid="63" data-track-view='{"mod":"kp_popu_63-1405","con":",,"}' data-track-click='{"mod":"kp_popu_63-1405","con":",,"}' data-report-view='{"mod":"kp_popu_63-1405","keyword":""}' data-report-click='{"mod":"kp_popu_63-1405","keyword":""}'><script type="text/javascript">
    (function() {
        var s = "_" + Math.random().toString(36).slice(2);
        document.write('<div style="" id="' + s + '"></div>');
        (window.slotbydup = window.slotbydup || []).push({
            id: "u4221910",
            container: s
        });
    })();

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_64" data-pid="64" data-track-view='{"mod":"kp_popu_64-1060","con":",,"}' data-track-click='{"mod":"kp_popu_64-1060","con":",,"}' data-report-view='{"mod":"kp_popu_64-1060","keyword":""}' data-report-click='{"mod":"kp_popu_64-1060","keyword":""}'><iframe  src="https://kunpeng-sc.csdnimg.cn/#/preview/235?positionId=64&queryWord=" frameborder="0" width= "100%"  height= "75px" scrolling="no" ></iframe></div></div>

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_65" data-pid="65" data-track-view='{"mod":"kp_popu_65-1378","con":",,"}' data-track-click='{"mod":"kp_popu_65-1378","con":",,"}' data-report-view='{"mod":"kp_popu_65-1378","keyword":""}' data-report-click='{"mod":"kp_popu_65-1378","keyword":""}'><script type="text/javascript">
    (function() {
        var s = "_" + Math.random().toString(36).slice(2);
        document.write('<div style="" id="' + s + '"></div>');
        (window.slotbydup = window.slotbydup || []).push({
            id: "u4221803",
            container: s
        });
    })();

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_66" data-pid="66" data-track-view='{"mod":"kp_popu_66-87","con":",,"}' data-track-click='{"mod":"kp_popu_66-87","con":",,"}' data-report-view='{"mod":"kp_popu_66-87","keyword":""}' data-report-click='{"mod":"kp_popu_66-87","keyword":""}'><div id="three_ad38" class="mediav_ad" ></div>

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_67" data-pid="67" data-track-view='{"mod":"kp_popu_67-658","con":",,"}' data-track-click='{"mod":"kp_popu_67-658","con":",,"}' data-report-view='{"mod":"kp_popu_67-658","keyword":""}' data-report-click='{"mod":"kp_popu_67-658","keyword":""}'><script type="text/javascript">
(function() {
    var s = "_" + Math.random().toString(36).slice(2);
    document.write('<div style="" id="' + s + '"></div>');
    (window.slotbydup = window.slotbydup || []).push({
        id: "u3573058",
        container:  s
    });
})();

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_68" data-pid="68" data-track-view='{"mod":"kp_popu_68-625","con":",,"}' data-track-click='{"mod":"kp_popu_68-625","con":",,"}' data-report-view='{"mod":"kp_popu_68-625","keyword":""}' data-report-click='{"mod":"kp_popu_68-625","keyword":""}'><script type="text/javascript" src="//rabc1.iteye.com/common/openjs/m022.js?hcuzbzy=bi"></script></div></div>

            <div class="recommend-item-box type_hot_word">
                            <div class="content clearfix">
                <div class="word float-left">
                                                        <span>
                    <a href="https://edu.youkuaiyun.com/courses/o5329_s5330_k " target="_blank">
                    机器学习教程                    </a></span>
                                                                            <span>
                    <a href="https://edu.youkuaiyun.com/courses/o280_s351_k " target="_blank">
                    Objective-C培训                    </a></span>
                                                                            <span>
                    <a href="https://edu.youkuaiyun.com/combos/o7115_s388_l0_t " target="_blank">
                    交互设计视频教程                    </a></span>
                                                                            <span>
                    <a href="https://edu.youkuaiyun.com/course/play/5599/104252 " target="_blank">
                    颜色模型                    </a></span>
                                                                            <span>
                    <a href="https://edu.youkuaiyun.com/combos/o363_l0_t " target="_blank">
                    设计制作学习                    </a></span>
                                                        </div>
            </div>
                                            <div class="content clearfix">
                <div class="float-left">
                                    <span>
                    <a href="https://www.youkuaiyun.com/gather_24/MtTaEg3sMDM5MS1ibG9n.html" target="_blank">
                    mysql关联查询两次本表</a>
                </span>
                                    <span>
                    <a href="https://www.youkuaiyun.com/gather_10/MtjaIg3sMTUzMy1kb3dubG9hZAO0O0OO0O0O.html" target="_blank">
                    native底部 react</a>
                </span>
                                    <span>
                    <a href="https://www.youkuaiyun.com/gather_1b/Ntzagg1sOTU3LWRvd25sb2Fk.html" target="_blank">
                    extjs glyph 图标</a>
                </span>
                                    <span>
                    <a href="https://www.youkuaiyun.com/gather_4a/MtzaQg1sNTMtZWR1.html" target="_blank">
                    学习产品经理的方法</a>
                </span>
                                    <span>
                    <a href="https://www.youkuaiyun.com/gather_4a/NtzaIg3sNjQtZWR1.html" target="_blank">
                    java 末班方法</a>
                </span>
                                    </div>
            </div>
                            </div>
                        <div class="recommend-loading-box">
            <img src='https://csdnimg.cn/release/phoenix/images/feedLoading.gif'>
        </div>
        <div class="recommend-end-box">
            <p class="text-center">没有更多推荐了，<a href="https://blog.youkuaiyun.com/" class="c-blue c-blue-hover c-blue-focus">返回首页</a></p>
        </div>
    </div>
</main>

<aside>
<div id="asideProfile" class="aside-box">
<!-- <h3 class="aside-title">个人资料</h3> -->
<div class="profile-intro d-flex">
    <div class="avatar-box d-flex justify-content-center flex-column">
        <a href="https://blog.youkuaiyun.com/zzy123654321">
          <img src="https://avatar.youkuaiyun.com/6/C/6/3_zzy123654321.jpg" class="avatar_pic">
                          <img src="https://g.csdnimg.cn/static/user-reg-year/1x/2.png" class="user-years">
                      </a>
        
    </div>
    <div class="user-info d-flex justify-content-center flex-column">
        <p class="name csdn-tracking-statistics tracking-click" data-report-click='{"mod":"popu_379"}'>
            <a href="https://blog.youkuaiyun.com/zzy123654321" target="_blank" class="" id="uid">冰水zzy</a>
        </p>
                </div>
            <div class="opt-box d-flex justify-content-center flex-column">
        <span  class="csdn-tracking-statistics tracking-click" data-report-click='{"mod":"popu_379"}'>
                                <a class="btn btn-sm btn-red-hollow attention" id="btnAttent">关注</a>
                        </span>
    </div>
        </div>
<div class="data-info d-flex item-tiling">
            <dl class="text-center" title="5">
                    <dt><a href="https://blog.youkuaiyun.com/zzy123654321?t=1">原创</a></dt>
        <dd><a href="https://blog.youkuaiyun.com/zzy123654321?t=1"><span class="count">5</span></a></dd>
                </dl>
    <dl class="text-center" id="fanBox" title="1">
        <dt>粉丝</dt>
        <dd><span class="count" id="fan">1</span></dd>
    </dl>
    <dl class="text-center" title="1">
        <dt>喜欢</dt>
        <dd><span class="count">1</span></dd>
    </dl>
    <dl class="text-center" title="2">
        <dt>评论</dt>
        <dd><span class="count">2</span></dd>
    </dl>
</div>
<div class="grade-box clearfix">
    <dl>
        <dt>等级：</dt>
        <dd>
            <a href="https://blog.youkuaiyun.com/home/help.html#level" title="2级,点击查看等级说明" target="_blank">
                <svg class="icon icon-level" aria-hidden="true">
                    <use xlink:href="#csdnc-bloglevel-2"></use>
                </svg>
            </a>
        </dd>
    </dl>
    <dl>
        <dt>访问：</dt>
        <dd title="16006">
            1万+            </dd>
    </dl>
    <dl>
        <dt>积分：</dt>
        <dd title="211">
            211            </dd>
    </dl>
    <dl title="432688">
        <dt>排名：</dt>
        <dd>43万+</dd>
    </dl>
</div>
</div>

个人分类

windows10下安装Vue.js的方法

2018年01月29日 10:15:33 冰水zzy 阅读数 5396

                    版权声明：本文为博主原创文章，未经博主允许不得转载。                        https://blog.youkuaiyun.com/zzy123654321/article/details/79191331                    </div>
                                                <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-3019150162.css" />
                                    <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-3019150162.css" />
            <div class="htmledit_views" id="content_views">

一，Vue.js简介

本文的主要内容是如何在windows10环境下正确安装Vue.js并运行项目。

二，安装的node.js

访问node.js官网https://nodejs.org/en/，下载最新版本node，根据提示安装。

安装成功之后，通过运行打开命令行程序的cmd.exe，输入命令

node -v

安装成功之后，通过运行打开命令行程序的cmd.exe，输入命令若安装成功，则会显示对应版本号。

在下载的node.js的的同时，计算机会安装npm包管理器，输入命令

npm -v

若安装成功，会显示出npm的版本信息

三，安装cnpm

由于使用npm安装插件是从国外服务器上获取的，国内使用会出现下载速度较慢，下载失败等问题，因此我们可以使用npm的国内镜像--cnpm。

在cmd.exe中输入命令

npm install cnpm -g --registry = https://registry.npm.taobao.org

等待安装完成，我们就可以使用cnpm代替npm管理安装包了。

关于cnpm，若想了解更多，请访问淘宝团队官方网址http://npm.taobao.org

四，安装Vue-cli

在cmd.exe中输入命令

npm install -g vue-cli

等待完成

五，构建项目

在CMD.EXE中将目录移动至选定目录，即项目创建的位置。

在选定目录下输入命令

vue init webpack Vue//Vue为项目文件夹的名称

在选定目录下输入命令之后按照提示输入项目名称，描述，作者等信息。

创建的项目文件夹如图所示

六，运行项目

将位置移动至项目目录，输入命令

npm install

npm run dev

等待加载完成，打开浏览器，输入localhost：8080，若运行成功，则会显示以下页面

        <div class="hide-article-box hide-article-pos text-center">
        <a class="btn-readmore" data-report-view='{"mod":"popu_376","dest":"https://blog.youkuaiyun.com/zzy123654321/article/details/79191331","strategy":"readmore"}' data-report-click='{"mod":"popu_376","dest":"https://blog.youkuaiyun.com/zzy123654321/article/details/79191331","strategy":"readmore"}'>
            展开阅读全文
            <svg class="icon chevrondown" aria-hidden="true">
                <use xlink:href="#csdnc-chevrondown"></use>
            </svg>
        </a>
    </div>

    <div id="dmp_ad_58"><div id="kp_box_58" data-pid="58" data-track-view='{"mod":"kp_popu_58-386","con":",,"}' data-track-click='{"mod":"kp_popu_58-386","con":",,"}' data-report-view='{"mod":"kp_popu_58-386","keyword":""}' data-report-click='{"mod":"kp_popu_58-386","keyword":""}'><div style="width:100%;background:#fff;">

<div class="comment-edit-box d-flex">
	<a id="commentsedit"></a>
	<div class="user-img">
		<a href="//me.youkuaiyun.com/Mighty_soldiers" target="_blank">
			<img class="" src="https://avatar.youkuaiyun.com/7/9/F/3_mighty_soldiers.jpg">
		</a>
	</div>
	<form id="commentform">
		<input type="hidden" id="comment_replyId">
		<textarea class="comment-content" name="comment_content" id="comment_content" placeholder="想对作者说点什么"></textarea>
		<div class="opt-box"> <!-- d-flex -->
			<div id="ubbtools" class="add_code">
				<a href="#insertcode" code="code" target="_self"><i class="icon iconfont icon-daima"></i></a>
			</div>
			<input type="hidden" id="comment_replyId" name="comment_replyId">
			<input type="hidden" id="article_id" name="article_id" value="79191331">
			<input type="hidden" id="comment_userId" name="comment_userId" value="">
			<input type="hidden" id="commentId" name="commentId" value="">
			<div style="display: none;" class="csdn-tracking-statistics tracking-click" data-report-click='{"mod":"popu_384","dest":""}'><a href="#" target="_blank" class="comment_area_btn">发表评论</a></div>
			<div class="dropdown" id="myDrap">
				<a class="dropdown-face d-flex align-items-center" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
				<div class="txt-selected text-truncate">添加代码片</div>
				<svg class="icon d-block" aria-hidden="true">
					<use xlink:href="#csdnc-triangledown"></use>
				</svg>
				</a>
				<ul class="dropdown-menu" id="commentCode" aria-labelledby="drop4">
					<li><a data-code="html">HTML/XML</a></li>
					<li><a data-code="objc">objective-c</a></li>
					<li><a data-code="ruby">Ruby</a></li>
					<li><a data-code="php">PHP</a></li>
					<li><a data-code="csharp">C</a></li>
					<li><a data-code="cpp">C++</a></li>
					<li><a data-code="javascript">JavaScript</a></li>
					<li><a data-code="python">Python</a></li>
					<li><a data-code="java">Java</a></li>
					<li><a data-code="css">CSS</a></li>
					<li><a data-code="sql">SQL</a></li>
					<li><a data-code="plain">其它</a></li>
				</ul>
			</div>  
			<div class="right-box">
				<span id="tip_comment" class="tip">还能输入<em>1000</em>个字符</span>
				<input type="button" class="btn btn-sm btn-cancel d-none" value="取消回复">
				<input type="submit" class="btn btn-sm btn-red btn-comment" value="发表评论">
			</div>
		</div>
	</form>
</div>

	<div class="comment-list-container">
	<a id="comments"></a>
	<div class="comment-list-box">
	</div>
	<div id="commentPage" class="pagination-box d-none"></div>
	<div class="opt-box text-center">
		<div class="btn btn-sm btn-link-blue" id="btnMoreComment"></div>
	</div>
</div>

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_59" data-pid="59" data-track-view='{"mod":"kp_popu_59-78","con":",,"}' data-track-click='{"mod":"kp_popu_59-78","con":",,"}' data-report-view='{"mod":"kp_popu_59-78","keyword":""}' data-report-click='{"mod":"kp_popu_59-78","keyword":""}'><script type="text/javascript">
(function() {
    var s = "_" + Math.random().toString(36).slice(2);
    document.write('<div style="" id="' + s + '"></div>');
    (window.slotbydup = window.slotbydup || []).push({
        id: "u3491668",
        container:  s
    });
})();

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_60" data-pid="60" data-track-view='{"mod":"kp_popu_60-43","con":",,"}' data-track-click='{"mod":"kp_popu_60-43","con":",,"}' data-report-view='{"mod":"kp_popu_60-43","keyword":""}' data-report-click='{"mod":"kp_popu_60-43","keyword":""}'><div id="three_ad8" class="mediav_ad" ></div>

		<div class="recommend-item-box blog-expert-recommend-box">
		<div class="d-flex">
			<div class="blog-expert-recommend">
				<div class="blog-expert">
					<div class="blog-expert-flexbox"></div>
				</div>
			</div>
		</div>
	</div>

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_61" data-pid="61" data-track-view='{"mod":"kp_popu_61-622","con":",,"}' data-track-click='{"mod":"kp_popu_61-622","con":",,"}' data-report-view='{"mod":"kp_popu_61-622","keyword":""}' data-report-click='{"mod":"kp_popu_61-622","keyword":""}'><script type="text/javascript" src="//rabc1.iteye.com/common/web/production/79m9.js?f=aszggcwz"></script></div></div>

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_62" data-pid="62" data-track-view='{"mod":"kp_popu_62-1062","con":",,"}' data-track-click='{"mod":"kp_popu_62-1062","con":",,"}' data-report-view='{"mod":"kp_popu_62-1062","keyword":""}' data-report-click='{"mod":"kp_popu_62-1062","keyword":""}'><iframe  src="https://kunpeng-sc.csdnimg.cn/#/preview/237?positionId=62&queryWord=" frameborder="0" width= "100%"  height= "75px" scrolling="no" ></iframe></div></div>

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_63" data-pid="63" data-track-view='{"mod":"kp_popu_63-1405","con":",,"}' data-track-click='{"mod":"kp_popu_63-1405","con":",,"}' data-report-view='{"mod":"kp_popu_63-1405","keyword":""}' data-report-click='{"mod":"kp_popu_63-1405","keyword":""}'><script type="text/javascript">
    (function() {
        var s = "_" + Math.random().toString(36).slice(2);
        document.write('<div style="" id="' + s + '"></div>');
        (window.slotbydup = window.slotbydup || []).push({
            id: "u4221910",
            container: s
        });
    })();

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_64" data-pid="64" data-track-view='{"mod":"kp_popu_64-1060","con":",,"}' data-track-click='{"mod":"kp_popu_64-1060","con":",,"}' data-report-view='{"mod":"kp_popu_64-1060","keyword":""}' data-report-click='{"mod":"kp_popu_64-1060","keyword":""}'><iframe  src="https://kunpeng-sc.csdnimg.cn/#/preview/235?positionId=64&queryWord=" frameborder="0" width= "100%"  height= "75px" scrolling="no" ></iframe></div></div>

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_65" data-pid="65" data-track-view='{"mod":"kp_popu_65-1378","con":",,"}' data-track-click='{"mod":"kp_popu_65-1378","con":",,"}' data-report-view='{"mod":"kp_popu_65-1378","keyword":""}' data-report-click='{"mod":"kp_popu_65-1378","keyword":""}'><script type="text/javascript">
    (function() {
        var s = "_" + Math.random().toString(36).slice(2);
        document.write('<div style="" id="' + s + '"></div>');
        (window.slotbydup = window.slotbydup || []).push({
            id: "u4221803",
            container: s
        });
    })();

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_66" data-pid="66" data-track-view='{"mod":"kp_popu_66-87","con":",,"}' data-track-click='{"mod":"kp_popu_66-87","con":",,"}' data-report-view='{"mod":"kp_popu_66-87","keyword":""}' data-report-click='{"mod":"kp_popu_66-87","keyword":""}'><div id="three_ad38" class="mediav_ad" ></div>

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_67" data-pid="67" data-track-view='{"mod":"kp_popu_67-658","con":",,"}' data-track-click='{"mod":"kp_popu_67-658","con":",,"}' data-report-view='{"mod":"kp_popu_67-658","keyword":""}' data-report-click='{"mod":"kp_popu_67-658","keyword":""}'><script type="text/javascript">
(function() {
    var s = "_" + Math.random().toString(36).slice(2);
    document.write('<div style="" id="' + s + '"></div>');
    (window.slotbydup = window.slotbydup || []).push({
        id: "u3573058",
        container:  s
    });
})();

<div class="recommend-item-box recommend-ad-box"><div id="kp_box_68" data-pid="68" data-track-view='{"mod":"kp_popu_68-625","con":",,"}' data-track-click='{"mod":"kp_popu_68-625","con":",,"}' data-report-view='{"mod":"kp_popu_68-625","keyword":""}' data-report-click='{"mod":"kp_popu_68-625","keyword":""}'><script type="text/javascript" src="//rabc1.iteye.com/common/openjs/m022.js?hcuzbzy=bi"></script></div></div>

            <div class="recommend-item-box type_hot_word">
                            <div class="content clearfix">
                <div class="word float-left">
                                                        <span>
                    <a href="https://edu.youkuaiyun.com/courses/o5329_s5330_k " target="_blank">
                    机器学习教程                    </a></span>
                                                                            <span>
                    <a href="https://edu.youkuaiyun.com/courses/o280_s351_k " target="_blank">
                    Objective-C培训                    </a></span>
                                                                            <span>
                    <a href="https://edu.youkuaiyun.com/combos/o7115_s388_l0_t " target="_blank">
                    交互设计视频教程                    </a></span>
                                                                            <span>
                    <a href="https://edu.youkuaiyun.com/course/play/5599/104252 " target="_blank">
                    颜色模型                    </a></span>
                                                                            <span>
                    <a href="https://edu.youkuaiyun.com/combos/o363_l0_t " target="_blank">
                    设计制作学习                    </a></span>
                                                        </div>
            </div>
                                            <div class="content clearfix">
                <div class="float-left">
                                    <span>
                    <a href="https://www.youkuaiyun.com/gather_24/MtTaEg3sMDM5MS1ibG9n.html" target="_blank">
                    mysql关联查询两次本表</a>
                </span>
                                    <span>
                    <a href="https://www.youkuaiyun.com/gather_10/MtjaIg3sMTUzMy1kb3dubG9hZAO0O0OO0O0O.html" target="_blank">
                    native底部 react</a>
                </span>
                                    <span>
                    <a href="https://www.youkuaiyun.com/gather_1b/Ntzagg1sOTU3LWRvd25sb2Fk.html" target="_blank">
                    extjs glyph 图标</a>
                </span>
                                    <span>
                    <a href="https://www.youkuaiyun.com/gather_4a/MtzaQg1sNTMtZWR1.html" target="_blank">
                    学习产品经理的方法</a>
                </span>
                                    <span>
                    <a href="https://www.youkuaiyun.com/gather_4a/NtzaIg3sNjQtZWR1.html" target="_blank">
                    java 末班方法</a>
                </span>
                                    </div>
            </div>
                            </div>
                        <div class="recommend-loading-box">
            <img src='https://csdnimg.cn/release/phoenix/images/feedLoading.gif'>
        </div>
        <div class="recommend-end-box">
            <p class="text-center">没有更多推荐了，<a href="https://blog.youkuaiyun.com/" class="c-blue c-blue-hover c-blue-focus">返回首页</a></p>
        </div>
    </div>
</main>

<aside>
<div id="asideProfile" class="aside-box">
<!-- <h3 class="aside-title">个人资料</h3> -->
<div class="profile-intro d-flex">
    <div class="avatar-box d-flex justify-content-center flex-column">
        <a href="https://blog.youkuaiyun.com/zzy123654321">
          <img src="https://avatar.youkuaiyun.com/6/C/6/3_zzy123654321.jpg" class="avatar_pic">
                          <img src="https://g.csdnimg.cn/static/user-reg-year/1x/2.png" class="user-years">
                      </a>
        
    </div>
    <div class="user-info d-flex justify-content-center flex-column">
        <p class="name csdn-tracking-statistics tracking-click" data-report-click='{"mod":"popu_379"}'>
            <a href="https://blog.youkuaiyun.com/zzy123654321" target="_blank" class="" id="uid">冰水zzy</a>
        </p>
                </div>
            <div class="opt-box d-flex justify-content-center flex-column">
        <span  class="csdn-tracking-statistics tracking-click" data-report-click='{"mod":"popu_379"}'>
                                <a class="btn btn-sm btn-red-hollow attention" id="btnAttent">关注</a>
                        </span>
    </div>
        </div>
<div class="data-info d-flex item-tiling">
            <dl class="text-center" title="5">
                    <dt><a href="https://blog.youkuaiyun.com/zzy123654321?t=1">原创</a></dt>
        <dd><a href="https://blog.youkuaiyun.com/zzy123654321?t=1"><span class="count">5</span></a></dd>
                </dl>
    <dl class="text-center" id="fanBox" title="1">
        <dt>粉丝</dt>
        <dd><span class="count" id="fan">1</span></dd>
    </dl>
    <dl class="text-center" title="1">
        <dt>喜欢</dt>
        <dd><span class="count">1</span></dd>
    </dl>
    <dl class="text-center" title="2">
        <dt>评论</dt>
        <dd><span class="count">2</span></dd>
    </dl>
</div>
<div class="grade-box clearfix">
    <dl>
        <dt>等级：</dt>
        <dd>
            <a href="https://blog.youkuaiyun.com/home/help.html#level" title="2级,点击查看等级说明" target="_blank">
                <svg class="icon icon-level" aria-hidden="true">
                    <use xlink:href="#csdnc-bloglevel-2"></use>
                </svg>
            </a>
        </dd>
    </dl>
    <dl>
        <dt>访问：</dt>
        <dd title="16006">
            1万+            </dd>
    </dl>
    <dl>
        <dt>积分：</dt>
        <dd title="211">
            211            </dd>
    </dl>
    <dl title="432688">
        <dt>排名：</dt>
        <dd>43万+</dd>
    </dl>
</div>
</div>