在网上随便找了一个todolist,就先做这个吧。
首先安装node.js,下载网站是nodejs.cn/download/
安装后在cmd里使用node -v查看node版本。
之后用命令行安装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,之后就静待安装了。
安装好后根据命令分别输入cd todolist-demo进入文件夹,然后再输入npm run dev启动项目
然后根据命令行提示在网页上输入网址,就可以看到Vue的项目页面了
↓
实际开发的时候一般不会用cmd打开项目,因为这样比较繁琐。
我们先对着cmdctrl+c关闭项目,然后用vscode打开文件夹,下面是项目
build和config是Vue的基础设置和网络设置,暂时不用动。node_modules是项目依赖包,也不用动。我们要使用的是src文件夹。
src文件夹里的assets一般放静态资源,components放组件页面,router放路由,可以在App.vue里写全局样式,main.js里写全局使用的js。
点击vscode的左下角打开操作区,编译器会提示你代码哪里有问题。
点击左下角的NPM脚本,点击dev后面的三角符号,会直接帮你启动项目。
如果没有的话就在终端输入npm run dev一样能启动项目。