vue3前端开发-开发环境安装篇

文章目录

1.安装nvm

如果本地已经安装了nodejs,请先卸载。

nvm主要的作用就是对nodejs的版本的管理,允许当前环境安装多个版本的nodejs,然后通过命令来选择使用哪个版本。

复制代码
#下载地址
https://github.com/coreybutler/nvm-windows/releases

window环境直接下载exe文件或者。

注意:安装路径不能有空格,不能有中文。

设置好nvm的安装路径,还有nodejs的安装路径后,点安装就完成了。

2.设置安装源为淘宝镜像

打开配置文件D:\tool\nvm\settings.txt,添加后面2行:

复制代码
root: D:\tool\nvm
path: D:\tool\node
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

3.通过nvm安装nodejs

查看nvm版本号

查看可用的nodejs的版本号: nvm list available

这里显示的其实并不全,下面提示,如果显示完整的,需要访问https://nodejs.org/en/download/releases

选择长期版本安装,比如这里安装nvm install 16.20.2

安装完成后,提示你如果要使用这个版本,请使用命令nvm use 16.20.2

最后nvm list展示了已经安装的版本,以及正在使用的版本,如果需要切换版本,请使用nvm use 对应的版本号

4. 安装pnpm

4.1 安装pnpm

nodejs安装时会自动安装npm,所以这里用npm来安装pnpm

复制代码
npm i -g pnpm

4.2 配置

pnpm安装完,pnpm的安装全局路径和缓冲路径都是默认在C:\Users\lenovo\AppData\Local\的。

配置淘宝镜像

复制代码
pnpm config set registry http://registry.npmmirror.com

配置 store-dir、state-dir、global-dir、global-bin-dir、cache-dir

复制代码
pnpm config set store-dir       D:\tool\pnpm\.pnpm-store
pnpm config set state-dir       D:\tool\pnpm\state
pnpm config set global-dir      D:\tool\pnpm\store
pnpm config set global-bin-dir  D:\tool\pnpm
pnpm config set cache-dir       D:\tool\pnpm\cache

配置完成,可以使用pnpm config list查看。

5.创建vite-vue项目

使用pnpm创建vite项目。

shell 复制代码
pnpm create vitedemo

#输入项目名
Project name: vitedemo

# 选择前端框架
Select a framework: Vue

# 选择语言
Select a variant: Typescript

安装和启动:

shell 复制代码
cd vitedemo
pnpm install
pnpm run dev

打开页面,查看一切正常

6. vue3demo目录结构

使用vscode打开vitedemo项目

解决找不到模块./App.vue的问题;

打开vite-env.d.ts文件,在里面添加下面内容:

复制代码
declare module '*.vue' {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{},{},any>
  export default component
}

由于选择的是TypeScript语言,但是ts不认识.vue后缀的程序,所以这里添加这个声明,是对.vue后缀的一个扩展。

7. 扩展插件安装

搜索Volar,安装前面3个VuelanguageFeatures(Volar)、TypeScript Vue Plugin(Volar)、Vue Volar extension Pack

如果安装了vetur,需要禁用,这是开发vue2使用的插件,如果需要开发vue2,则可以再次打开。

8. 用户代码片段

8.1 设置

在vscode中,设置-> 用户代码片段,输入vue.json回车,在生成的文件中添加下面代码段。

json 复制代码
{
  "createVue3Template":{
    "prefix": "vue3",
    "body": [
      "<template>",
      "",
      "<div></div>",
      "",
      "</template>",
      "",
      "<script setup lang='ts'>",
      "",
      "</script>",
  
      "<style lang=\"scss\" scoped>",
      "",
      "</style>"
    ],
    "description": "createVue3Template"
  },
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"  <div class=\"\"></div>","</template>",
			"",
			"<script>",
			"export default {",
			"  props: [],",
			"  components: {},",
			"  data() {",
			"   return {}",
			"  },",
      "  created() {},",
      "  mounted() {},",
      "  methods: {},",
			"}",
			"</script>",
			"<style lang=\"scss\" scoped>",
 
			"</style>"
		],
		"description": "生成vue模板"
	}
}

8.2 快速生成代码

在component组件中新建Book.vue, 然后输入vue3,并按回车,即可根据模板自动生成代码片段。

所以我们也可以参考上面的模板自己自定义代码片段。

以上vue3前端开发系列文章,关于环境搭建篇的主要内容。

相关推荐
多啦C梦a3 分钟前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心3 分钟前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试
heartmoonq5 分钟前
深入理解 Vue 3 响应式系统原理:Proxy、Track 与 Trigger 的协奏曲
前端
长路 ㅤ   16 分钟前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
独立开阀者_FwtCoder29 分钟前
放弃 JSON.parse(JSON.stringify()) 吧!试试现代深拷贝!
前端·javascript·github
爱喝水的小周2 小时前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen02112 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅2 小时前
介绍electron
前端·javascript·electron
周胡杰2 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
31535669132 小时前
ClipReader:一个剪贴板英语单词阅读器
前端·后端