VueMall

1. 创建项目

vue create mall

2. 划分目录结构

3. 引用css文件

引入两个 css 文件对项目的样式进行基础的修改。

1. normalize.css

   • 这个 css 文件是 GitHub 上一个文件
   • Link

2. base.css

   • @import "./normalize.css";
          
     /*:root -> 获取根元素html*/
     :root {
       --color-text: #666;
       --color-high-text: #ff5777;
       --color-tint: #ff8198;
       --color-background: #fff;
       --font-size: 14px;
       --line-height: 1.5;
     }
          
     *,
     *::before,
     *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
          
     body {
       font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
       user-select: none; /* 禁止用户鼠标在页面上选中文字/图片等 */
       -webkit-tap-highlight-color: transparent; /* webkit是苹果浏览器引擎，tap点击，highlight背景高亮，color颜色，颜色用数值调节 */
       background: var(--color-background);
       color: var(--color-text);
       /* rem vw/vh */
       width: 100vw;
     }
          
     a {
       color: var(--color-text);
       text-decoration: none;
     }
          
          
     .clear-fix::after {
       clear: both;
       content: '';
       display: block;
       width: 0;
       height: 0;
       visibility: hidden;
     }
          
     .clear-fix {
       zoom: 1;
     }
          
     .left {
       float: left;
     }
          
     .right {
       float: right;
     }
     

3. App.vue 引用 css 文件

   • <template>
       <div id="app"></div>
     </template>
          
     <script>
          
     export default {
       name: 'App',
       components: {
       }
     }
     </script>
          
     <style>
       @import "./assets/css/base.css";
     </style>