Vue.js项目实训

课上写了一个项目实训作业,历经千辛万苦终于弄完,记录一下,并且分享给大家。
一、基础工作
首先要保证你的webpack基础配置正确并且安装脚手架vue-cli,这个前期工作挺艰难的,我配的时候花了几个钟才配好。
二、创建项目
按着书上的配置进行。
Vue.js项目实训
Vue.js项目实训
三、过程
https://download.****.net/download/weixin_44805285/12469458
刚开始写,不知道怎么直接在这里导入资源,我上传了代码资源在上面链接中,不用积分直接下载即可,环境配好创一个项目,这个复制过去就可以运行看效果了。
四、测试
在vscode中,保存一个txt文件在项目那,然后Ctrl+Shif+p打开外部终端,输入npm run serve启动项目,如果项目启动成功,在谷歌浏览器中输入本地域名,“http://localhost:8080/,可以打开谷歌浏览器的控制台,选择使用谷歌浏览器的模拟手机效果
Vue.js项目实训
五、效果图
Vue.js项目实训
Vue.js项目实训
Vue.js项目实训
Vue.js项目实训
Vue.js项目实训
毕设可以参考以下这种,不过这是静态的,自己再加上一些后台的东西、数据库,就挺好的了。