vue学习笔记(一)(vue webpack+vue-router+nodeJs npm)
该博客只是记录我自己使用vue-cli搭建一个vueJs项目,以及慢慢的完成一个项目的过程,主要记录心得与重要知识,由于自己半年前才转入前端,在之前有一些基础,在开始做vuejs项目之前已经明白nodeJs和vueJs的基本用法,所以,这里废话不多说,直接上步骤:1.vue-cli 是vue的脚手架工具,主要有:(1)目录结构 (2)本地调试(3)代码部署(4)热加载 (5)单元测试
该博客只是记录我自己使用vue-cli搭建一个vueJs项目,以及慢慢的完成一个项目的过程,主要记录心得与重要知识,由于自己半年前才转入前端,在之前有一些基础,在开始做vuejs项目之前已经明白nodeJs和vueJs的基本用法,所以,这里废话不多说,直接上步骤:
1.vue-cli 是vue的脚手架工具,主要有:(1)目录结构 (2)本地调试(3)代码部署(4)热加载 (5)单元测试
vue-cli 安装:
1.首先确定自己的电脑已经安装nodejs,如果安装,可以通过命令:node -v 查看nodejs版本号(至于npm安装慢,这个在nodeJs教程中有详细解决,这里不记载了http://www.runoob.com/nodejs/nodejs-tutorial.html)
2.全局安装vue-cli:npm install -g vue-cli
3.查看vue是否安装成功 vue,显示如图代表成功安装,我们就可以安装webpack了
4.vue init webpack project(项目包名 ):安装过程中系统会询问哪些需要安装,哪些不需要安装,根据自己的需求来选择就ok,这里默认安装到c盘,在我这安装完成后项目存放在:C:\Users\user\project,具体如图:
5.cd project :进入刚刚创建好的项目中
6.npm install :安装nodejs所需要的包
7.npm run rev : 运用nodeJs运行项目,运行成功后会自动打开网页
好了,自己搭建项目完毕,就开始啃这个项目吧,我这是用的vue2.3.0版本,看了哈,跟其他版本写法上不一样,这些就可以直接参考最新文档了,然后我打开我这边的项目,目录结构如下图:
其中build和config文件是属于webpack,node_modules是nodejs中的一些包,库
src下就是我们的重点了:
main.js是入口,components文件夹下放的就是vue写的组件,router文件就是路由啦,到这里,整个入门就算完了,,本人小白一枚,该博客是自己学习的一些心得和体会,好让以后回顾
最后在哆嗦一点:如果没有看nodejs和vuejs基础的看过来:
nodejs:http://www.runoob.com/nodejs/nodejs-tutorial.html
vuejs菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html
还有在项目中有用到webpack和vue-router
webpack教程:http://www.runoob.com/w3cnote/webpack-tutorial.html
vue-router:http://router.vuejs.org/zh-cn/essentials/nested-routes.html
在这里也推荐一篇入门vue不错的博客(里面含有sublime text3配置)http://www.cnblogs.com/bluedoctor/p/5885148.html
更多推荐
所有评论(0)