标签：code features Manually Vue visual vue CSS select

 

visual studio code 配置vue开发环境

 

本文针对的开发工具是vscode, 配合vue-cli创建的项目,保持开发环境的统一，需依照本文进行如下配置。

vscode版本：VSCodeUserSetup-x64-1.45.0.exe

一 配置相关环境

1.1 安装nodejs

Vue项目通常通过webpack工具来构建，而webpack命令的执行是依赖node.js的环境的，所以首先要安装node.js

nodejs版本：node-v12.16.3-x64

# 验证是否安装成功

node -v

1.2 配置淘宝镜像

# 1 配置淘宝镜像

       npm install -g cnpm --registry=https://registry.npm.taobao.org

# 2 设置环境变量

  找到cnpm.cmd所在目录配置到环境变量path

# 3 验证是否安装成功

   cnpm -v

1.3 安装webpack

# 安装webpack

cnpm install webpack -g

# 查看webpack版本

webpack -v

二 安装插件

需要安装如下插件：

插件	功能
Vetur	高亮.vue文件，附带有格式化功能，配合Eslint插件对代码进行格式化检查
Eslint	检查你的js、html、css代码，确保它们符合规范，并且代码风格保持一致性，强制性的规则
Debugger for Chrome	代码调试
koroFileHeader	在vscode中用于生成文件头部注释和函数注释的插件

三 配置首选项

文件->首选项->设置，在settings.json下的【工作区设置】中添加以下配置：

{   .......

    "editor.formatOnType": true,         

    "editor.formatOnSave": true,        //保存时自动格式化

    ..........

    "fileheader.customMade": {             //生成头部注释配置

        "Description": "file information",

        "Author": "will",

        "Date": "Do not edit", // 文件创建时间(不变)

        "LastEditors": "will", // 文件最后编辑者

        "LastEditTime": "Do not edit" // 文件最后编辑时间

    },

    "vetur.format.defaultFormatter.html": "js-beautify-html",   //统一代码风格

    "vetur.format.defaultFormatterOptions": {

        "js-beautify-html": {

            "wrap_attributes": "auto"

        },

        "prettyhtml": {

            "printWidth": 100,

            "singleQuote": false,

            "wrapAttributes": false,

            "sortAttributes": false

        }

    }

}

四 新建vue脚手架工程

4.1 安装vue cli

# 安装@vue/cli

cnpm install @vue/cli -g

# 查看vue-cli版本

vue --version

@vue/cli 4.3.1

4.2 创建项目

# 1 进入指定目录

D:\vue

# 2 新建项目（注意项目名不能有大写）

vue create nlp-partner-web

# 3 按 ↓ 选择 “Manually select features”手动配置，再按 Enter

Vue CLI v4.3.1

? Please pick a preset:

  default (babel, eslint)

> Manually select features

# 4 选择你需要的配置项，选择完后按Enter键，（键盘上下键选择，空格键选择）

Vue CLI v4.3.1

? Please pick a preset: Manually select features

? Check the features needed for your project:

 (*) Babel

 ( ) TypeScript

 ( ) Progressive Web App (PWA) Support

 (*) Router

 (*) Vuex

 (*) CSS Pre-processors

>(*) Linter / Formatter

 ( ) Unit Testing

 ( ) E2E Testing

# 5 选择是否使用 history router，（选择n）

Vue CLI v4.3.1

? Please pick a preset: Manually select features

? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce

? Use history mode for router? (Requires proper server setup for index fallback

in production) (Y/n) n

# 6 选择css 预处理器

Vue CLI v4.3.1

? Please pick a preset: Manually select features

? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce

? Use history mode for router? (Requires proper server setup for index fallback

in production) No

? 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

# 7 选择 Eslint 代码验证规则（提供一个插件化的 javascript 代码检测工具，这里选择 ESLint + Prettier 按下Enter键）

Vue CLI v4.3.1

? Please pick a preset: Manually select features

? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce

? Use history mode for router? (Requires proper server setup for index fallback

in production) No

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported

by default): Less

? Pick a linter / formatter config:

  ESLint with error prevention only

  ESLint + Airbnb config

  ESLint + Standard config

> ESLint + Prettier

# 8 选择什么时候进行代码规则检测（建议选择Lint on save）

Lint on save // 保存就检测

Lint and fix on commit // fix和commit时候检查

# 9 选择如何存放配置（建议选择package.json）

In dedicated config files // 独立文件放置

In package.json // 放package.json里

# 10 最后提示选 y 是保存当前配置，按下Enter键等待创建

Vue CLI v4.3.1

? Please pick a preset: Manually select features

? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce

? Use history mode for router? (Requires proper server setup for index fallback

in production) No

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported

by default): Less

? Pick a linter / formatter config: Prettier

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i

? Pick additional lint features: Lint on save

? Where do you prefer placing config for Babel, ESLint, etc.? In package.json

? Save this as a preset for future projects? (y/N)

4.3 运行项目

# 进入项目目录

  cd nlp-partner-web

# 运行Vue项目

  npm run serve

# 打包项目

  npm run build

五 代码调试

参考：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

六 常用快捷键

快捷键	说明
shift + alt + f	格式化代码
ctrl+alt+i	添加头部注释
ctrl+alt+t	添加函数注释

标签：code,features,Manually,Vue,visual,vue,CSS,select
来源： https://www.cnblogs.com/jiyuyun/p/12942533.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。