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 项目介绍
相关文章
|
1月前
|
资源调度 JavaScript 前端开发
「Vue3系列」Vue3简介及安装
Vue3是Vue.js框架的第三个主要版本,于2020年9月18日发布,代号为“One Piece”。Vue3在性能、体积、TypeScript支持、API设计等方面都有显著的提升和改变。
70 2
YI
|
10月前
|
JavaScript 程序员
Vue学习笔记|Vue基础04
Vue学习笔记|Vue基础04
YI
45 1
YI
|
10月前
|
JavaScript 前端开发
Vue学习笔记|Vue基础03
Vue学习笔记|Vue基础03
YI
53 0
|
7月前
|
JavaScript 前端开发 算法
VUE 学习笔记(二)VUE的深入理解
VUE 学习笔记(二)VUE的深入理解
|
9月前
|
JavaScript 容器
【vue系列-07】vue脚手架的基本使用
【vue系列-07】vue脚手架的基本使用
90 0
|
9月前
|
JavaScript 前端开发 小程序
【vue】初探vue,创建vue项目
前言: 如果要开发一个平台,不仅需要掌握后端技术,还需要通过前端页面进行展示,即达到美观效果,又方便我们进行操作达到很好的交互效果。 这里我接触到了vue前端框架,市面上有很多比较好用的基于vue的前端组件库,比如面向app的饿了么Mint UI,面向腾讯微信内网页和微信小程序的We UI,服务于pc界面的iView UI,面向所有层次的layUI,还有现在即将要学习的饿了么推出的Element UI,主要用于浏览器界面展示的框架;
YI
|
10月前
|
Web App开发 JavaScript 算法
Vue学习笔记|Vue基础01
Vue学习笔记|Vue基础01
YI
57 0
YI
|
10月前
|
缓存 JavaScript
Vue学习笔记|Vue基础05
Vue学习笔记|Vue基础05
YI
32 1
YI
|
10月前
|
JavaScript 容器
Vue学习笔记|Vue基础02
Vue学习笔记|Vue基础02
YI
55 0
|
11月前
|
JavaScript 前端开发 算法
Vue(Vue2+Vue3)——1.Vue简介
Vue(Vue2+Vue3)——1.Vue简介