vscode+vue+stylus+github创建新项目

我这人记性不好,每次新建项目总是丢三落四,所以要用笔记录下来。

1.github创建项目

 复制gihub项目路径,clone到本地工作空间

2.用vscode打开此文件夹

3.安装vetur插件

4.打开新终端,创建vue项目

vue init webpack test

会提示文件夹已存在,选择y,回车,开始自动下载

之后为常规创建vue项目的设置

设置完成自动安装vue项目依赖(或者手动npm install)

 

5.vscode打开新创建的项目,也就是test文件夹,打开新终端

执行 npm run dev,项目构建完成,把地址贴到浏览器就可以看到vue页面了

6.安装stylus插件

7.安装stylus依赖

 npm install stylus stylus-loader --save-dev

这里安装以后运行可能报错

原因:

stylus-loader安装的版本过高

解决方案: 

1.npm uninstall stylus-loader
2.npm install stylus-loader@3.0.2  --save-dev

8.格式化配置

 stylus格式化

去掉末尾逗号

去掉末尾分号

优先使用单引号

vscode中ctrl+shift+p,输入settings,选择settings(JSON)

json文件中新增以下配置,注意json格式,就可以shit+alt+f格式化代码了

  // 以下为stylus配置
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
  //一下为vue设置
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // #vue组件中html代码格式化样式
      "wrap_attributes": "force-aligned", //也可以设置为“auto”,效果会不一样
      "wrap_line_length": 200,
      "end_with_newline": false,
      "semi": false,
      "singleQuote": true
    },
    "prettier": {
      //设置分号
      "semi": false,
      //双引号变成单引号
      "singleQuote": true,
      //禁止随时添加逗号,这个很重要。找了好久
      "trailingComma": "none"
    }
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

 

 总结:按照上面步骤创建的项目就可以开始正常快速开发了,有些安装的插件下次就不用在安装了。

 

原文地址:https://www.cnblogs.com/loveFlex/p/14554422.html