三、基于Vite创建Vue3项目 3.1、创建vite npm create vite@latest 之后跟随引导,操作以下3个命令启动程序。 拿到启动url 浏览器启动,启动成功了。 本地文件夹目录如下: 之后,将文件夹目录拖到VSCode。 3.2、删除文件 src/style.css src/components/HelloWord.vue 3.3、删除
vscode可以在项目配置个性的设定,首先需要创建setting.json文件,在vscode中点击左下角的设置按钮,选择命令面板(或者直接使用快捷键 shift+command+p),然后搜索“setting.json”,选择“Open Workspace Setting(JSON)”即可。 然后就可以看到在项目的.vscode目录下新建了一个setting.json文件,当然这个是个空文件,我们按照相...
我们看不懂的可能只有import HelloWorld from './components/HelloWorld.vue'和<HelloWorld msg="Vite + Vue" />这两句 这里其实就是前面我们说的App.vue是所有组件的父组件。 在父组件中引入了子组件 ,并给子组件传递了一个字符串参数msg="Vite + Vue" 4.4 HelloWorld.vue 这是一个子组件,供父组件调用 我们...
打开Vue.js官网:https://cn.vuejs.org/,我们会发现Vue 2将于 2023 年 12 月 31 日停止维护 vue2停止维护 虽然Vue2的项目还不少,但是官方尤大大都在拥抱Vue3。 那我们也不能落后啊,今天就来说说怎么创建第一个Vue3项目。 并安装Element Plus及一些常用配置,实现如下简单增删改查页面 一、工具简介 这里我们...
为了节省开发步骤，我们推荐使用 yyg-cli。它是一个加速Vite和Vue3项目构建的工具，通过脚手架简化项目创建过程，节省开发步骤。首先，通过以下命令全局安装yyg-cli：```bash npm install -g yyg-cli ```安装完成后，使用yyg create命令即可开始创建项目。依赖安装完毕后，进入项目根目录，执行yarn dev命令即可...
今天来带大家从0开始搭建一个vue3版本的后台管理系统,之后会补搭建好的模板git仓库地址 一、环境准备 node v16.14.2 pnpm 8.0.0 二、初始化项目文件 本项目使用vite进行构建,vite官方中文文档参考:cn.vitejs.dev/guide/ 如未安装pnpm(自由选择,博主使用pnpm) ...
1、创建一个vite-vue3项目 npm init vite@latestmy-vue-app-- --template vue 根据屏幕提示,进入到项目目录,执行初始化操作 npm install 2、修改启动端口 打开package.json,找到script下的dev 修改前 "dev": "vite“, 修改后 "dev": "vite --host 0.0.0.0 --port 18010", ...
二、创建vite项目 #npm npm create vite@latest #yarn yarn create vite #pnpm pnpm create vite # npm 7+, 需要额外加 --: npm create vite@latest vue-ts-app -- --template vue-ts # yarn yarn create vite vue-ts-app --template vue-ts ...
一、 使用Vite创建Vue3项目 1.全局安装vite，使用命令npm install vite -g 2.创建vue3项目，使用命令 npm create vite@latest ,确认项目名 称，选择Vue及TypeScript 3. 使用用vscode打开项目，运行命令 npm install npm run dev 4.整个项目目录结构如下：5.访问页面 二、将打包项目发布到Nginx 1.将打包后...