0、知识点

• Iconfont
• Vue重构静态页面
• 路由跳转
• 安装scss

1、Iconfont

• Iconfont阿里巴巴矢量图标库
• 网址：https://www.sogou.com/link?url=DSOYnZeCC_okpKbDOhLALe0Qj-_pT8Br
  
  2、重构说明
• 由于项目是 Vue 版本，所以
• 首先，写静态页面
• 然后，分别通过 Vue重构静态页面
• 最后，用 Vue实现业务

3、开始重构

• 将写好的静态页面样式css、图片images，放到我们的静态资源assets文件夹中，
  
• 安装scss
• 安装scss，首先得下载Ruby
• Ruby、Scss安装教程
• https://www.sass.hk/install/ 官方安装教程
• https://jingyan.baidu.com/article/84b4f565eee59d60f7da324d.html 百度经验安装教程
• 安装scss
  
• 查看安装版本
  

3.1 页面适应

• 在网页的中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。

<meta name="viewport" content="width=device-width, initial-scale=1">

3.2 页面跳转

  <!-- 从开始页面跳转到home页面 -->
           <router-link to="/home"> 
                <div id="start" class="start">                
                    <span>
                            开始点菜
                    </span>                
                </div>
            </router-link>

3.3 从home页跳转到pcontent详情页

      				<div class="inner">
                             <!-- 跳转到详情页 -->
							<router-link to="/pcontent">
								<img src="../assets/images/1.jpg" />
								<p class="title">大蒜腊肉</p>						
								<p class="price">¥26</p>
							
							</router-link>							
						
						</div>		

4、 vscode 批量替换命令快捷键

• ctr + f //查找要替换的部分
• ctr+shift+l //全部选中，然后开始替换
• 还可以，使用ctr+h，直接全部替换

5、Vscode打开已经创建好的vue项目

• 首先 在终端当中，切换到此文件夹的目录当中
  • cd xxxx
• 然后，需要安装依赖
  • npm install
• 最后，运行项目
  • npm run dev