Vue2零基础写一个todolist(一)

657 阅读2分钟

-1101932505(1).png 在网上随便找了一个todolist,就先做这个吧。

首先安装node.js,下载网站是nodejs.cn/download/

安装后在cmd里使用node -v查看node版本。

image.png

image.png

之后用命令行安装Vue2,npm install vue-cli@2.9.1

安装好后使用vue -V查看vue版本,有版本号就说明安装成功了。

我的编辑器选用的Vscode,功能比较完善。

找块空白处新建一个文件夹,我的文件夹名为F:\learn\vue2Learn

在cmd里打开这个文件夹cd /d F:\learn\vue2Learn,输入vue init webpack "项目名",开始创建新的Vue项目。

之后会有选项问你是否安装vue-router,我们选Yes,ESLint建议选No,看到太多因为格式问题翻车的例子了,其他的都选No,安装方式选择Npm,之后就静待安装了。 image.png

安装好后根据命令分别输入cd todolist-demo进入文件夹,然后再输入npm run dev启动项目

image.png

然后根据命令行提示在网页上输入网址,就可以看到Vue的项目页面了 image.png

image.png

实际开发的时候一般不会用cmd打开项目,因为这样比较繁琐。

我们先对着cmdctrl+c关闭项目,然后用vscode打开文件夹,下面是项目

image.png

build和config是Vue的基础设置和网络设置,暂时不用动。node_modules是项目依赖包,也不用动。我们要使用的是src文件夹。

image.png

src文件夹里的assets一般放静态资源,components放组件页面,router放路由,可以在App.vue里写全局样式,main.js里写全局使用的js。

点击vscode的左下角打开操作区,编译器会提示你代码哪里有问题。

image.png

点击左下角的NPM脚本,点击dev后面的三角符号,会直接帮你启动项目。

image.png

如果没有的话就在终端输入npm run dev一样能启动项目。

image.png

[第二篇](Vue2零基础写一个todolist(二) - 掘金 (juejin.cn))