vue实现todo功能(一):搭建vue-webpack环境

Kaso

前言

我最开始因为项目原因接触的是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 information
  Examples:

    # 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-nameprojectname 什么意思呢?看他的Examples写的很清楚。

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

vue init webpack-simple untitle3

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

跑起来

如何把文件跑起来呢?我们可以直接看他package.jsonscript

  "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

clipboard.png

已经成功了!!!

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

催更Q:516764216

阅读 1.7k

天才总是着手改变世界

8 声望
1 粉丝
0 条评论

天才总是着手改变世界

8 声望
1 粉丝
文章目录
宣传栏