Vue3.0实现todolist(Vue3.0环境搭建)

简介: Vue3.0实现todolist(Vue3.0环境搭建)
准备工作

1、官网安装node,进入node.js官网安装长期支持版

打开终端输入:node -v 如果出现node版本号,表明安装成功

安装node自带npm,包管理工具

输入npm -v 出现npm的版本号


2、安装淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org

输入cnpm -v 会出现一系列版本号,说明安装成功

3、安装vue环境:cnpm i -g vue @vue/cli

输入vue -V检测vue是否装好

步骤


1:进入d盘 创建一个项目

vue create todolist

这里需要注意一下

要选择Manually select features

等待命令执行 这个时候会发现d盘多了一个文件夹todolist



2:使用vscode打开todolist

在终端运行命令npm run serve



项目创建启动成功 可以在浏览器里面查看 这个时候就可以开始造代码了

文件和目录结构

node_modules 存放所有依赖
public favicon.ico 浏览器左上角显示的图标
index.html 项目最终上线的代码
src文件夹 assets文件夹:存放静态资源,包括图标、图片等
components文件夹:存放一般组件
router文件夹:配置路由
store文件夹:配置状态管理
views文件夹:存放路由组件
App.vue:根组件
main.js:项目组入口js文件,引入第三方的库和插件
.browserslistrc 管理浏览器版本的
.gitignore 上传git中忽略的文件
bable.config.js 配置bable的,转移js语法
package-lock.json 所有包的具体信息
package.json 包管理文件
README.md 项目介绍
相关文章
|
JavaScript 前端开发 数据处理
vue2、vue3中使用$forceUpdate()
vue2、vue3中使用$forceUpdate()
1911 0
|
1月前
|
缓存 JavaScript 前端开发
对比一下Vue2和Vue3?
本文首发于微信公众号“前端徐徐”,详细对比了 Vue 2 和 Vue 3 在原理、生命周期、性能、编码方式、API、Diff 算法、打包构建、TS 支持等八个方面的差异,帮助读者全面了解两者的不同之处。
171 0
对比一下Vue2和Vue3?
|
2月前
|
存储 缓存 JavaScript
Vue3比Vue2快在哪里?
本文分析了Vue 3相比Vue 2在性能提升的几个关键点,包括改进的diff算法、静态标记、静态提升、事件监听器缓存以及SSR渲染优化,这些改进使得Vue 3在处理大规模应用时更加高效。
36 1
|
6月前
|
JavaScript
【vue】 vue2 实现飘窗效果
【vue】 vue2 实现飘窗效果
129 1
|
6月前
|
JavaScript 前端开发 编译器
Vue2跟Vue3的对比
Vue2跟Vue3的对比
96 0
|
JavaScript
Vue的安装
如果直接用script标签引入,Vue会被注册为一个全局变量。 直接引入分为 1.开发版本 2.生产版本
|
JavaScript 容器
【vue系列-07】vue脚手架的基本使用
【vue系列-07】vue脚手架的基本使用
126 0
|
JavaScript 开发者
Vue(Vue2+Vue3)——2.使用VsCode搭建Vue开发环境
Vue(Vue2+Vue3)——2.使用VsCode搭建Vue开发环境
|
JavaScript 开发工具 开发者
Vue(Vue2+Vue3)——29.创建Vue脚手架(Vue CLI)
Vue(Vue2+Vue3)——29.创建Vue脚手架(Vue CLI)
|
JavaScript IDE 测试技术
Vue2.x-03使用vue-cli搭建Vue开发环境
Vue2.x-03使用vue-cli搭建Vue开发环境
101 0