【Vue】从搭建环境到使用 VSCode

2022/1/8 6:03:44

编程Tag： vue npm 搭建安装 html vscode cnpm 3.2

本文主要是介绍【Vue】从搭建环境到使用 VSCode，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、安装 Vue
- 1、下载并安装 node.js
- 2、安装淘宝镜像（cnpm）
- 3、安装全局 vue
- 4、安装 vue-cli（脚手架：前端框架）
二、创建 vue 项目
三、打造更人性化的 VsCode
- 3.1、安装必备插件
- 3.2、插件自定义配置
  - 3.2.1、优化 Vetur 的全文格式化，使 html 标签不换行
  - 3.2.2、修改中文字体
  - 3.2.3、如同输入“!”，再按“tab”自动创建 html 模板一样，自动创建 vue 模板
四、打开项目文件夹，开启开发之旅

一、安装 Vue

1、下载并安装 node.js

官方地址：https://nodejs.org/en/download/

Windows PowerShell（管理员），执行 node -v 和 npm -v，有版本信息，表示安装成功

注：npm 的作用就是对 node.js 依赖的包进行管理

2、安装淘宝镜像（cnpm）

npm 包安装地址是国外服务器，如果出现下载慢或者出现异常，若解决此问题，就需要使用 cnpm 指令替代 npm，cnpm 是淘宝团队做的 npm 的镜像，目前 10 分钟更新一次，执行：npm install cnpm -g --registry=https://registry.npm.taobao.org

执行 cnpm -v 显示如下信息，表示安装成功：

3、安装全局 vue

执行：cnpm install -g vue，如下，安装成功：

4、安装 vue-cli（脚手架：前端框架）

最新版，执行 cnpm install @vue/cli -g
非最新版，执行cnpm install vue-cli -g

可能会出现（使用 cmd 不会出现）：

执行set-ExecutionPolicy RemoteSigned，并输入 Y 或 A，回车，之后，再次执行安装 vue-cli 即可！

出现安装进度，等待片刻，安装完成，查看版本，表示安装成功：

二、创建 vue 项目

1、cd 到指定文件夹，并创建项目，项目名不能使用大写字符，报错：

2、首次提示是否使用淘宝镜像，输入 Y，回车，输出：

3、选择一个，回车，此处我选择了 Vue 3，回车，等待创建完成：

4、cd 到项目目录下 cd myfirstvuedemo，执行 npm run serve（若 node.js 提示防火墙，允许），编译、启动网站服务：

5、浏览器访问，成功：

接下来，就可以使用 IDE 开发你的网站了！

三、打造更人性化的 VsCode

VsCode 安装完成后，需要‘调教’一番后，才可以让你前端的开发更加舒适，不止 vue！

3.1、安装必备插件

Vetur —— 语法高亮、智能感知、Emmet等
包含格式化功能， Alt+Shift+F（格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个 Ctrl 需要同时按着）
EsLint —— 语法纠错
Auto Close Tag —— 自动闭合HTML/XML标签
Auto Rename Tag —— 自动完成另一侧标签的同步修改
JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入，除 js 外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
Path Intellisense —— 自动路径补全，输入路径时，提供下了下级目录列表选择
TML CSS Support —— 让 html 标签上写 class 时，智能提示当前项目所支持的样式
Beautify —— 格式化代码（与 Vetur 格式化类似，可以不装此插件），值得注意的是，beautify 插件支持自定义格式化代码规则
Bracket Pair Colorizer —— 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色
open in browser —— 直接右键项目单击启动
Live Server —— 这个插件在开发单网页时很有用，安装之后可以打开一个简单的服务器。而且还会自动更新。安装之后，打开项目文件夹，再在文件上点击右键就会出现一个 Open with Live Server 的选项，就会自动打开浏览器了，默认端口号是 5500
GitLens —— Git Supercharged 必备，查看 git 文件提交历史
Document This —— 注释文档生成
One Monokai Theme —— 能够选择自己喜欢的颜色主题，来编写代码，比较喜欢用的是暗黑风格的 monokai
vscode-icons —— 很好用，能够选择自己喜欢的图标主题，比较推荐 vscode icons
EditorConfig for Visual Studio Code —— 一种被各种编辑器广泛支持的配置，使用此配置有助于项目在整个团队中保持一致的代码风格。

3.2、插件自定义配置

3.2.1、优化 Vetur 的全文格式化，使 html 标签不换行

1、点击 Vetur 右侧的 “在 setting.json 中编辑”

2、贴入以下脚本，Ctrl+S 保存即可

"vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_line_length": 120,
            "wrap_attributes": "auto", //属性折行对齐方式
            "end_with_newline": false
        }
    }

3.2.2、修改中文字体

不想用宋体，想使用微软雅黑，如下图（Consolas, 微软雅黑, monospace）：

3.2.3、如同输入“!”，再按“tab”自动创建 html 模板一样，自动创建 vue 模板

{
  // Example:
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div class=\"vue\">$0</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  components: {},",
      "  steup() {",
      "    return {",
      "    };",
      "  },",
      "  props: {},",
      "  data() {",
      "    return {",
      "    };",
      "  },",
      "  watch: {},",
      "  computed: {},",
      "  methods: {},",
      "  created() {},",
      "  mounted() {}",
      "};",
      "</script>",
      "<style scoped>",
      "#app{}",
      "</style>"
    ],
    "description": "A vue file template"
  }
}