vue实现todo功能（一）：搭建vue-webpack环境

2024-04-16 00:32:15

前言

我最开始因为项目原因接触的是react，对于我这种美观狂而言，react中难以调解的css让我十分抓狂，说是在写页面，因为不能写自己的样式，像是在拼凑页面，没意思。于是我开始了解vue这种将css html javacript融合在一起写，非常爽！！

todo-list可以说是每个项目的入门最佳方式，涉及到数据的增删查改，想做大一点还可以涉及到缓存数据库等等，非常适合新人入手。

反正我学会了hhhh

资源推荐

学习视频：imooc
源代码：Github-todo star！！！谢谢，开心！！

开始

在开始进行vue开发的时候我们需要配置基础的node环境和vue包

npm i vue-cli -g

安装完成后我们就可以初始化项目了

vue init这时候我们会看到：Usage: vue-init <template-name> [project-name]Options:-c, --clone  use git clone--offline    use cached template-h, --help   output usage informationExamples:# create a new project with an official template$ vue init webpack my-project# create a new project straight from a github template$ vue init username/repo my-project

这个帮助信息意思是在进行vue init的时候，要确立template-name和projectname 什么意思呢？看他的Examples写的很清楚。

好了，我们根据提示创建一个webpack-simple包

vue init webpack-simple untitle3

这就是我们生成的一个简易webpack-vue文件目录

跑起来

如何把文件跑起来呢？我们可以直接看他package.json的script

  "scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot","build": "cross-env NODE_ENV=production webpack --progress --hide-modules"}

第一行dev是运行的意思，第二行build是构建静态资源，我们通过dev启动服务

npm run dev

已经成功了！！！

下一篇：组件嵌套与组件传参

催更Q：516764216

vue实现todo功能（一）：搭建vue-webpack环境相关推荐

【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
vue实战记录（二）- vue实现购物车功能之创建vue实例
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据作者:狐狸家的鱼本文链接:vue实战-实现购物车功能(二) GitHub:sue ...
vue学习一(利用npm搭建Vue工程项目流程)
文章目录 Vue.js是什么? 搭建流程一.利用sublime方式二.利用npm构建vue项目 Vue.js是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进 ...
vue暂存功能_示例vue 的keep-alive缓存功能的实现
本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. #Vue 实现组件信息的缓存当我 ...
建立项目接口文档_分享：一步一个脚印，vue入门之使用mockjs搭建vue项目测试服务器...
在以前的文档中,我们构建了vue项目的整体架构,详见vue入门:vue项目架构设计起步,现在我们主要对其中的mock server 进行完善. 一.概述前后端分离的项目优点之一就是可以前后端并行开发 ...
vue入门（一）搭建vue项目，基础显示，指令
之前接触过vue,但是一直不是十分清晰,学的云里雾里,最近打算再次系统的整理一下,重新入门.还是根据vue官方文档一步一步的来,但是是属于简化的那种,会把我的学习过程都记录下来. 下一篇:vue入门( ...
前端模板-2【vue部分小功能、bug处理】
前端模板[vue部分小功能] 1 Vue部分模板 1.1 vue实现store[存储当前选中页面] 我的习惯用法,大家可自行调整[以存储当前页面名称为例] ①在src下新建文件夹store,并创建co ...
vue面试H5适配快速搭建
vue面试H5适配快速搭建一.环境的搭建 nodejs 环境搭建 nodejs下载检查版本 node -v npm -v 切换淘宝镜像cnpm npm install cnpm -g --regi ...
vue组件封装技巧，如何对vue模块进行功能封装
如何对vue模块进行功能封装,vue组件封装技巧当业务不断累加,导致原本干净整洁的代码越来越冗余,各种变量和注释已经让他人望而却步,往往又苦于重构带来的成本,导致诞生很多巨石应用.与其让自己或他人面 ...

最新文章

热门文章