外贸网站建设招聘,的网页设计培训班,保洁公司做网站有什么作用,dede和wordpress文章目录 1.安装nvm2.设置安装源为淘宝镜像3.通过nvm安装nodejs4. 安装pnpm4.1 安装pnpm4.2 配置 5.创建vite-vue项目6. vue3demo目录结构7. 扩展插件安装8. 用户代码片段8.1 设置8.2 快速生成代码 1.安装nvm 如果本地已经安装了nodejs#xff0c;请先卸载。 nvm主要的作用就是… 文章目录 1.安装nvm2.设置安装源为淘宝镜像3.通过nvm安装nodejs4. 安装pnpm4.1 安装pnpm4.2 配置 5.创建vite-vue项目6. vue3demo目录结构7. 扩展插件安装8. 用户代码片段8.1 设置8.2 快速生成代码 1.安装nvm 如果本地已经安装了nodejs请先卸载。 nvm主要的作用就是对nodejs的版本的管理允许当前环境安装多个版本的nodejs然后通过命令来选择使用哪个版本。 #下载地址
https://github.com/coreybutler/nvm-windows/releaseswindow环境直接下载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 pnpm4.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项目。
pnpm create vitedemo#输入项目名
Project name: vitedemo# 选择前端框架
Select a framework Vue# 选择语言
Select a variant: Typescript安装和启动
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{},{},anyexport 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回车在生成的文件中添加下面代码段。
{createVue3Template:{prefix: vue3,body: [template,,div/div,,/template,,script setup langts,,/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前端开发系列文章关于环境搭建篇的主要内容。
