vue框架的搭建

vue框架的搭建

1，安装脚手架

vue install -g @vue/cli

注意：安装脚手架报错时，错误代码-4058可以用以下方法解决

1，配置淘宝镜像
npm config set registry https://registry.npm.taobao.org
2，npm info underscore （如果上面配置正确这个命令会有字符串response）
3，npm --registry https://registry.npm.taobao.org info underscore
最后继续安装就可以了

2，创建一个vue项目

1，vue createe 项目名

2，上下选择 空格确定

? Please pick a preset: (Use arrow keys)
  default (babel, eslint)
  Manually select features √ 
///
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel √
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router √
 (*) Vuex √
 (*) CSS Pre-processors √
 (*) Linter / Formatter √
 ( ) Unit Testing
 ( ) E2E Testing
 //
 ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)   Yes
 //
 ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass) √
  Less
  Stylus  
 //
 ? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
> ESLint + Prettier   √
//
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save √
 ( ) Lint and fix on commit    
 /
 ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files √
  In package.json   
 /
 是否保存配置，方便下次使用（可选可不选）
 ? Save this as a preset for future projects? (y/N)    Yes
 /
 ? Save preset as:   （配置保存的名称）
 /
 cd 项目
 npm run serve 启动项目

注意：node安装sass时报错怎么解决

错误信息： Error: Can't find Python executable "python", you can set the PYTHON env variable

解决方法：npm install --global --production windows-build-tools

3，sass的使用

---------------------------------------------------------分割线-----------------------------------------------------------

首先安装px转换vw rem的工具这个工具十分方便，自动转化px单位为vw，rem

地址：https://www.npmjs.com/package/@moohng/postcss-px2vw

安装：npm install @moohng/postcss-px2vw --save-dev

在根目录下创建一个.postcssrc.js文件
内容：
module.exports = {
  plugins: {
    '@moohng/postcss-px2vw': {}
  }
}

页面正常写px就好，浏览器的检查会看到是否转化成功

---------------------------------------------------------分割线-----------------------------------------------------------

接下来开始sass的使用

首先是sass的变量：

所有的变量必须要以$开头

$aaa: 12px;
.text{
    font-size: $aaa;
}

如果变量嵌套在字符串中，需要写在#{}中

$aaa: 12px;
$fx:top;
.text{
    border-#{$fx}:$aaa solid red
}

嵌套

$aaa: 12px;
$fx:top;
.text{
    color:red;
    .text_neibu{
      border-#{$fx}:$aaa solid blue;
    }
}

mixin:

​ 简单理解，是可以重用的代码块，通过@include 命令

@mixin focus_style {
    color: blue;
}
.text{
    @include focus_style;
}

该方法还可以传递参数来改变应用

@mixin focus_style($h:200px) {
    margin-top: $h;
}
.text{
    @include focus_style;
    .text_neibu{
      @include focus_style(100px)
    }
}

继承

​ 通过@extend，一个选择器可以继承另一个选择器

.text{
  margin-left: 10px;
}
.text_neibu{
    @extend .text;
    color: blue;
}

运算

.text{
  margin-left:100px+100px
}

自定义函数

​ 通过@function来定义函数

@function heighters($height){
  @return $height * 2
}
.text{
  height: heighters(200px);
}

4，SVG图使用方法

第一步：打开iconfont网站 选择几个到购物车后下载代码

第二步：解压缩到桌面中 打开文件html页面

第三步：利用Symbol方法历史用图标

• 引入项目下面生成的 symbol 代码下，在index.html页面引入：

<script src="./iconfont.js"></script>

• 加入通用CSS代码（一次即可）一样在index.html页面中

  <style>
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  </style>
  

• 挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx" class="icon1"></use>
</svg>

到这里完成了icon图标的应用 接下来是颜色的修改

.icon1{
  fill: blue;
  width: 50px;
}

​