Vue学习（常用实例、脚手架搭建）-学习笔记

左手的ㄟ右手 2022-10-04 15:52 162阅读 0赞

### 文章目录 ###

*   *  Vue学习（常用实例、脚手架搭建）-学习笔记
     *   *  实例1
         *   *  法1
             *  法2
         *  实例2
         *  脚手架搭建
         *   *  vue-cli2.0
             *  vue-cli4.0

## Vue学习（常用实例、脚手架搭建）-学习笔记 ##

附加：阿里巴巴矢量图库：[https://www.iconfont.cn/][https_www.iconfont.cn]  
![在这里插入图片描述][20210711183427944.png]![在这里插入图片描述][20210711183437578.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]

### 实例1 ###

#### 法1 ####

* { 
        padding: 0px;
        margin: 0px;
    }
    ul { 
        list-style-type: none;
    }
    
    a { 
        color: #333;
        text-decoration: none;
    }
    body { 
        font-size: 14px;
        background-color: #f9f9f9;
    }
    body,html{ 
        width:100%;
        height:100%;
    }
    .tree { 
        width: 200px;
        height: 100%;
        background: #fff;
    }
    .tree> ul { 
        height: 100%;
    }
    .p_title { 
        color: #333;
        display: block;
        padding: 15px;  
        cursor:pointer;
        border-bottom: 1px solid #f1f1f1;
    }
    .selected { 
        color: #1890ff;
        border-bottom: 1px solid #1890ff;
    }
    .p_title> i{ 
        padding-right:10px;
    }
    .p_title b{ 
        float: right;
        transition:all ease 1s;
    }
    .down { 
        transform:rotate(180deg)
    }
    .up { 
        transform:rotate(0deg)
    }
    .p_title:hover { 
        color: #1890ff;
        border-bottom: 1px solid #1890ff;
    }
    
    .c_item a { 
        display: block;
        padding: 10px 20px 10px 40px;
        background: #fff;
        color: #333;
        cursor:pointer;
    }
    
    .c_item a:hover { 
        color: #1890ff;
        background: #e6f7ff;
        border-right: 4px solid #1890ff;
    }

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8"/>
    	<title>导航目录</title>
    	<link rel="stylesheet" type="text/css" href="css/index.css">
    	<link rel="stylesheet" href="font/iconfont.css">
    	<script src='js/vue.js'></script>
    	<script src='js/index.js'></script>
    </head>
    <body>
    	<div class="tree" id='my'>
    		<ul>
    			<li class="p_item" v-for="(v,i) in items" :key="i">
    				<a class="p_title" @click="flagChange(v)" :class="v.flag?'selected':''">
    					<i class="iconfont" :class="v.icon"></i>{
       {v.name}}
    					
    					<b :class="v.flag ?'down':'up'">^</b>
    				</a>
    				<ul class="c_item" v-show="v.flag">
    					<li v-for="(sub,j) in v.subItems" :key="j">
    						<a>{
       {sub.name}}</a>
    					</li>
    				</ul>
    			</li>
    		</ul>
       </div>
    </body>
    </html>

#### 法2 ####

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8"/>
    	<title>导航目录</title>
    	<link rel="stylesheet" type="text/css" href="css/index.css">
    	<link rel="stylesheet" href="font/iconfont.css">
    	<script src='js/vue.js'></script>
    	<script src='js/axios.js'></script>
    	<script src='js/index2.js'></script>
    </head>
    <body>
    	<div class="tree" id='my'>
    		<ul>
    			<li class="p_item" v-for="(v,i) in items" :key="i">
    				<a class="p_title" @click="n=i" :class="n==i?'selected':''">
    					<i class="iconfont" :class="v.icon"></i>{
       {v.name}}
    					<b :class="n==i?'down':'up'">^</b>
    				</a>
    				<ul class="c_item" v-show="n==i">
    					<li v-for="(sub,j) in v.subItems" :key="j">
    						<a>{
       {sub.name}}</a>
    					</li>
    				</ul>
    			</li>
    		</ul>
       </div>
    </body>
    </html>

### 实例2 ###

* { 
        padding: 0px;
        margin: 0px;
    }
    ul { 
        list-style-type: none;
    }
    a { 
        text-decoration: none;
    }
    body,html{ 
        width:100%;
        height:100%;
    }
    .panel-height { 
        height: 310px;
        overflow-y: scroll;
    }
    .panel-height li { 
        cursor:default;
        background: #f9f9f9;
        display: inline-block;
        border: 1px solid #d6e9c6;
        margin: 5px;
        padding: 5px 15px;
        position:relative;
    }
    .panel-height li:hover { 
        border: 1px solid #3c763d;
    }
    .panel-height li span.del{ 
        position:absolute;
        color:#999;
        right:3px;
        top:-3px;
    } 
    .panel-height li span.del:hover{ 
        color:#f60;
    } 
    .panel-height li.selected { 
        color:#f60;
        background: #d6e9c6;
        border: 1px solid #3c763d;
    }

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8"/>
    	<title>多项选择框</title>
    	<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    	<link rel="stylesheet" type="text/css" href="css/index.css">
    	<script src='js/vue.js'></script>
    	<script src='js/index.js'></script>
    </head>
    <body>
    	<div id='my'>
    		<div class="container"> 
    			<div class="row">
    				
    				<div class="col-xs-6 col-sm-6" >
    					<div class="panel panel-success">
    						
    						<div class="panel-heading">
    							<h3 class="panel-title">省份({
       {leftData.length}}) / 当前选中({
       {rightData.length}})</h3>
    						</div>
    						
    						<div class="panel-body panel-height">
    							<ul>
    								 <li v-for="(v,i) in leftData" :key="v.id" :class="v.flag?'selected':''" @click="add(v)">{
       {v.name}}</li>
    							</ul>
    						</div>
    					</div>
    				</div>
    				
    				<div class="col-xs-6 col-sm-6" >
    					<div class="panel panel-success">
    						
    						<div class="panel-heading">
    							<h3 class="panel-title">已选择省份({
       {rightData.length}})</h3>
    						</div>
    						
    						<div class="panel-body panel-height">
    							<ul >
    								<li v-for="(v,i) in rightData" :key="v.id" @mouseover="state=i" @mouseout="state='hide'" >{
       {v.name}}
    									<span class="del" v-show="state==i" @click="del(v,i)">x</span>
    								</li>
    							</ul>
    						</div>
    					</div>
    				</div>  
    			</div>
    		</div>
       </div>
    	
    </body>
    </html>

### 脚手架搭建 ###

#### vue-cli2.0 ####

需要先了解：

> Html  
> Css  
> Javascript  
> Node.js 环境（npm包管理工具）  
> Webpack 自动化构建工具

**一、安装node.js**

进入官网下载node.js : [https://nodejs.org/en/][https_nodejs.org_en]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 5]  
**二、安装 cnpm**

1、说明：npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；  
2、使用npm安装插件：命令提示符执行npm install  
3、选装 cnpm 因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事！来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”;

安装：`npm install -g cnpm --registry=https://registry.npm.taobao.org`  
输入`cnpm -v`，可以查看当前cnpm版本

**三、安装vue-cli脚手架构建工具**

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：  
安装：`$ cnpm install vue-cli –g //g表示全局安装`  
安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。  
![在这里插入图片描述][20210711203713528.png]  
**四、创建一个基于webpack模板的新项目**

要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。可以使用：

$ vue init webpack my-app      // my-app为自定义项目名

![在这里插入图片描述][20210711203757796.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 7]  
运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好

Project name (my-app) # 项目名称（我的项目）
    Project description (A Vue.js project) # 项目描述一个Vue.js 项目
    Author 作者（你的名字）
    Install vue-router? (Y/n) # 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
    Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）
    Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（使用箭头键）
    Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha？ （Y/ N）
    Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试，Nightwatch？ （Y/ N）

注：当然这些都看你自己个人的情况

**五、运行项目**

$ cnpm run dev

运行成功后，浏览器直接显示的是页面如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 8]  
六、安装项目所需要的依赖  
刚初始化的项目是没有依赖的，如果运行会报类似这样的错误，输入命令

$ cnpm install

#### vue-cli4.0 ####

**三、安装vue-cli脚手架构建工具**

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。

1、先确认是否有安装过vue-cli  
`vue -V` //如有的话，就用下面命令卸载  
![在这里插入图片描述][20210711204306865.png]  
输入命令 ： `cnpm install -g @vue/cli`  
![在这里插入图片描述][20210711204328960.png]  
![在这里插入图片描述][20210711204334251.png]  
指定版本:  
如是3.0以下

npm install -g vue-cli@版本号

如是3.0以上

npm install -g @vue/cli@版本号

**四、创建项目**

vue create 项目名称

![在这里插入图片描述][20210711204440278.png]  
![在这里插入图片描述][20210711204443285.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 9]  
空格选择对应需要的插件

![在这里插入图片描述][20210711204455441.png]  
![在这里插入图片描述][20210711204459437.png]  
![在这里插入图片描述][20210711204504629.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 10]  
**五、启动项目**

![在这里插入图片描述][20210711204520410.png]  
![在这里插入图片描述][20210711204524584.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 11]

[https_www.iconfont.cn]: https://www.iconfont.cn/
[20210711183427944.png]: https://img-blog.csdnimg.cn/20210711183427944.png
[20210711183437578.png]: /images/20221004/a6665d905d2c4a04b85712130949cf1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20221004/fd7806d15a70489f9249f65d5e3fc97c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]: /images/20221004/a15ff281133f422580268a43f51b1e5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]: /images/20221004/b4cac30c7ebb4fc09435d5b0044fcb6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]: /images/20221004/70c30a58d5e14be69d0c06b73bba58e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]: /images/20221004/64acabeece4f49cdb80a8d3b548a7b81.png
[https_nodejs.org_en]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 5]: /images/20221004/c35f6391acb846ceaa4a04bb8320581c.png
[20210711203713528.png]: /images/20221004/83be67697d564f7287020a4c61376d56.png
[20210711203757796.png]: /images/20221004/4f0585e46d634136b0a52b087fb02f79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 6]: /images/20221004/221c8c64cfea457c97e52fa6edc57eb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 7]: /images/20221004/385e71d2c2f641e08cfaed15516ecb0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 8]: /images/20221004/985648ee97af4a1f960c6e1ff1598f63.png
[20210711204306865.png]: /images/20221004/cfd306d4e4d546fd9799620bd88c2f4a.png
[20210711204328960.png]: /images/20221004/d61352a4fba54dbdb969ac870b7c9a83.png
[20210711204334251.png]: /images/20221004/fc9586fa8fb64a8a906b0b7d7b2552e3.png
[20210711204440278.png]: /images/20221004/ec5a75254a1441a6bd29158aabec6da3.png
[20210711204443285.png]: /images/20221004/f3facf1303944e81a572c04c2ff86dd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 9]: /images/20221004/09aab7c18df347a4952797499f5b101c.png
[20210711204455441.png]: /images/20221004/a68e5aff312d41b28daad948fd079a38.png
[20210711204459437.png]: /images/20221004/72b0a7f022234badb699f4c43ef8552f.png
[20210711204504629.png]: /images/20221004/759c631ff23545a29038358afb1493ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 10]: /images/20221004/a979e99b41244fc99bbdc575e0bd9036.png
[20210711204520410.png]: /images/20221004/09687359b014430387c199d775691630.png
[20210711204524584.png]: /images/20221004/d7f26e01536e4c75a3baefe43dc03fe3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 11]: /images/20221004/5a58f03ba24146f3ac5189048cd5ec98.png