一 .vue项目搭建(v2)

• Vue CLI

局部安装vue-cli 2.9.6 和项目创建：

npm init -y # 初始化项目依赖文件
cnpm i -D vue-cli # 安装脚手架
npx vue -V # 查看vue-cli版本号
npx vue init webpack project-one # 创建项目

局部安装vue-cli 4.5.15 和项目创建：

npm init -y # 初始化项目依赖文件
cnpm i -D @vue/cli # 安装脚手架
npx vue -V # 查看vue-cli版本号
npx vue create project-two # 创建项目
# OR
npx vue ui # 创建项目

全局安装vue-cli 2.9.6 和项目创建：

npm i webpack -g # 安装webpack
npm i vue-cli -g # 安装脚手架
vue init webpack demo # 创建项目

全局安装vue-cli 4.5.15 和项目创建：

npm install -g @vue/cli # 用npm安装脚手架
# OR
yarn global add @vue/cli # 用yarn 安装脚手架

vue create my-project # 创建项目
# OR
vue ui # 创建项目

• element ui 引入

npm i element-ui -S     

• 全局/按需引入：element.eleme.cn/#/zh-CN/com…

• 安装sass

npm install -g sass
报错安装  npm i node-sass sass-loader -D

还是报错看这里：blog.csdn.net/mChales_Liu…

-引入reset.css重置css样式文件

```/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
 
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video{
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   font-weight: normal;
   vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section{
   display: block;
 }
 ol, ul, li{
   list-style: none;
 }
 blockquote, q{
   quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after{
   content: '';
   content: none;
 }
 table{
   border-collapse: collapse;
   border-spacing: 0;
 }
  
 /* custom */
 a{
   color: #7e8c8d;
   text-decoration: none;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
 }
 ::-webkit-scrollbar{
   width: 5px;
   height: 5px;
 }
 ::-webkit-scrollbar-track-piece{
   background-color: rgba(0, 0, 0, 0.2);
   border-radius: 6px;
   -webkit-border-radius: 6px;
 }
 ::-webkit-scrollbar-thumb:vertical{
   height: 5px;
   background-color: rgba(125, 125, 125, 0.7);
   border-radius: 6px;
   -webkit-border-radius: 6px;
 }
 ::-webkit-scrollbar-thumb:horizontal{
   width: 5px;
   background-color: rgba(125, 125, 125, 0.7);
   border-radius: 6px;
   -webkit-border-radius: 6px;
 }
 html, body{
   width: 100%;
   font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
 }
 body{
   line-height: 1;
   -webkit-text-size-adjust: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 html{
   overflow-y: scroll;
 }
  
 /*清除浮动*/
 .clearfix:before,
 .clearfix:after{
   content: " ";
   display: inline-block;
   height: 0;
   clear: both;
   visibility: hidden;
 }
 .clearfix{
   *zoom: 1;
 }
  
 /*隐藏*/
 .dn{
   display: none;
 }

-在App.vue中全局引入

• 安装图标库（阿里巴巴矢量库）

-步骤： 参考网址：

普通图标：

blog.csdn.net/weixin_3067…

彩色图标：

blog.csdn.net/chihaihai/a…