对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个

1.安装node环境

可以使用自带的终端cmd命令行工具;windows下推荐安装git bash,可以使用linux命令;

908144-20170509203048566-67667409.png

第一步检测是否安装node;没有安装node的同学请到官网下载安装 https://nodejs.org/en/download/

安装成功后在命令行查看node版本,如果有说明安装成功。

2.安装vue脚手架工具vue-cli

大家在安装node的时候,会自动安装npm;

908144-20170509203432738-1814142793.png

可以先行查看npm版本;

使用npm安装vue-cli:

3.准备工作已经完毕,下面直接使用vue-cli初始化webpack项目;

vue init webpackyourprojectname(项目名)

908144-20170509204132457-2130011615.png

中间会输入项目名称,项目描述,作者等信息;

一路回车

可以看到我们刚才创建的webpack项目已经建好了:

908144-20170509204401301-1123296361.png

4.查看目录结构

908144-20170509204539676-390962047.png

安装依赖

国内有些包npm无法安装,可以使用cnpm安装

5.启动本地开发

908144-20170509204917972-1861779960.png

本地node服务器已经跑起来了,端口为配置文件中的端口

908144-20170509205116488-1993471172.png

6.配置路由

908144-20170509205342394-1515756064.png

创建新的页面组件,将路由指向该.vue 文件

908144-20170509205510613-1363284936.png

到此,使用vue-cli创建的vue项目基本可以上手开发了,恭喜!

908144-20170509205627410-65787567.png

7.打包上线

908144-20170509205825082-1636465328.png

看到build complete,证明打包成功;

观察目录结构,发现多了一个dist文件夹,这便是webpack打包后的文件,将改文件和后台商量,以什么形式放到服务器即可,上线成功。

908144-20170509210025191-2137910495.png

啦啦啦~ 至此,我们vue项目算是初步跑起来了,后续会详解webpack配置,以及本地mock数据开发等文章,欢迎大家批评指正!

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐