第一步 创建vue3项目 首先你已经安装好了node.js,这些就不用多说了 如果你没有更换过镜像源,先来更换镜像源 npm config set registry=https://registry.npmmirror.com 然后来创建vite + vue3项目 # 这个命令 只能选择 框架 和 语言,其他模块需要手动安装和并配置 npm create vite@latest 这个指令是可以选择安...
module.exports={printWidth:100,tabWidth:2,useTabs:false,semi:false,// 未尾逗号vueIndentScriptAndStyle:true,singleQuote:true,// 单引号quoteProps:'as-needed',bracketSpacing:true,trailingComma:'none',// 未尾分号jsxBracketSameLine:false,jsxSingleQuote:false,arrowParens:'always',insertPragma:false,requ...
import Nav from './components/Nav.vue' <template> <Nav></Nav> <router-view></router-view> </template> 五、服务器配置: 打开vite.config.ts文件,添加server代码,让本地所有ip都可以访问: import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // ...
确保你的电脑已经安装了 Node.js(建议使用最新稳定版 LTS),然后安装 Vite CLI。在命令行中运行以下命令: npm install -g create-vite 2. 创建新项目 使用create-vite 命令创建一个新项目,可以选择 Vue3 作为默认框架。运行以下命令: create-vite my-vue-app --template vue 3. 安装 Element Plus 进入项目目...
创建Vite项目 #创建项目 pnpm create vite #或(选择模板创建) pnpmcreate vite my-vue-app --template vue #或者ts开发 pnpmcreate vite my-vue-app --template vue-ts #进入项目 cd my-vue-app #安装 npm install #开启项目服务 pnpm run dev
vite项目初始化 element-plus的自动引入 暗黑模式以及自定义主题的实现(主要使用scss+css变量) 动态路由实现页面级权限、vue指令实现按钮级权限 根据路由渲染侧边栏菜单 标签栏的开发,以及keep-alive缓存 svg-sprite图标解决方案 项目中所涉及的vue3知识 pinia的简单用法 ...
最近新开发的项目使用 vue3,本着 “好记性不如烂笔头” 的想法,决定将项目搭建的过程及其中遇到的问题记录下来。 一、项目初始化 npm init vite my-vue3-app 选择vue, 按enter; 选择typescript按enter; cd my-vue3-app 安装初始化依赖 npm i
项目使用vite初始化,选择vue3+ts模板,然后包管理器使用的是yarn。具体初始化就不献丑了。 除此之外,我这里加入了 eslint+prettier 为代码格式化,jest+@vue/test-utils来提供测试支持(写了两三个组件测试就懒得写了...),这些没有也不影响开发,这里提一嘴。 目录规划如下: ...
Node、Npm、Vue3、Vite、TS、VueRouter、Element-Plus等依赖和插件安装。 Node安装 参照官网安装最新Node 使用nvm管理和安装 (PS:mac和window对于nvm的安装顺则顺,不顺会很难整,给进阶者使用,不建议小白硬整。) Npm安装镜像 Node装好了就自带了,但是需要使用国内镜像。
这样一个vue3+vite+ts的项目初始化就完成了 运行项目不会默认打开浏览器,需要在package.json里面 ,在vite 后面加上--open 安装vue全家桶 Pinia状态管理 由于 vuex 4 对 typescript 的支持让人感到难过,所以状态管理弃用了 vuex 而采取了 pinia. pinia 的作者是 Vue 核心团队成员 尤大好像说 pinia 可能会代替...