Javascript

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

本文主要是介绍【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/
image
Windows PowerShell(管理员),执行 node -vnpm -v,有版本信息,表示安装成功
image

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

2、安装淘宝镜像(cnpm)

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

3、安装全局 vue

执行:cnpm install -g vue,如下,安装成功:
image

4、安装 vue-cli(脚手架:前端框架)

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

可能会出现(使用 cmd 不会出现):
image
执行set-ExecutionPolicy RemoteSigned,并输入 Y 或 A,回车,之后,再次执行安装 vue-cli 即可!
image

出现安装进度,等待片刻,安装完成,查看版本,表示安装成功:
image

二、创建 vue 项目

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

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

3、选择一个,回车,此处我选择了 Vue 3,回车,等待创建完成:
image

4、cd 到项目目录下 cd myfirstvuedemo,执行 npm run serve(若 node.js 提示防火墙,允许),编译、启动网站服务:
image

5、浏览器访问,成功:
image

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

三、打造更人性化的 VsCode

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

3.1、安装必备插件

  • Vetur —— 语法高亮、智能感知、Emmet等
    包含格式化功能, Alt+Shift+F(格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个 Ctrl 需要同时按着)
    image

  • 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 中编辑”
image

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
        }
    }

image

3.2.2、修改中文字体

不想用宋体,想使用微软雅黑,如下图(Consolas, 微软雅黑, monospace):
image

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

image

{
  // 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"
  }
}

四、打开项目文件夹,开启开发之旅

image

image

have fun~
image

这篇关于【Vue】从搭建环境到使用 VSCode的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!