vueJs项目实战(一)

来源:互联网 发布:未来人类笔记本知乎 编辑:程序博客网 时间:2024/05/17 08:06

该博客仅仅只是记录我在做vue项目过程中的一些知识和心得以及思路,具体代码只有等整个项目完成之后上传github

好了,废话不多说,要写项目,还得有工具和软件为支撑,在这里我们就使用vue-cli搭建vueJs项目

一丶如果电脑没有安装nodejs的先安装nodeJs,具体的看http://www.runoob.com/nodejs/nodejs-tutorial.html这里,能够满足nodejs了,

二丶 全局安装:npm install -g vue-cli

三丶查看vue是否安装成功: vue

丶出现上图就表明我们已经成功安装,init webpack  :  vue init webpack project(项目包名),在安装过程中会让开发中选择安装自己需要的功能,如图:

五丶好了,到了这里使用vue-cli搭建vuejs项目已经成功,现在需要进入项目  cd project(因为项目默认安装到c盘,我这儿默认路径是C:\Users\user\project)

六丶安装项目所需的node包   npm install

七丶运用nodejs运行项目  ,成功后电脑会自动打开网页,

ok,让我们看看完整项目目录结构:

  其中build和config文件是属于webpack的,node_modeules文件是node所需的包

src下是我们开发者的重点:其中main.js是项目的入口,app.vue是vue的入口,而components文件就主要放vue的组件 ,而router文件是在我们vue init webpack 过程中开发者选择安装了才会有的,这个就是路由(简单来说就是用来控制页面跳转到)



原创粉丝点击