|
今天小峰给大家提供一个新版块内容——学员作品。 用于展示睿峰学员的学习成果，在读学员或者往期学员都可以供稿。 作品内容要求原创，是自己亲自动手获得的劳动成果，不能是网上粘贴复制的。 睿峰鼓励每一个学员积极参与，勇于展现自己的学习成果。 下面的内容是前端学员夕水提供的《零基础学会vue(上)》。夕水是一个很好学，进步比较快的学员，刚毕业不久，如果内容有什么需要完善的地方，请大家多多包涵，欢迎大家一起探讨交流。 1.使用vue-cli+vuex+webpack写一个简单的demo。 (参考上线demo:http:///project/vue-master/#/) （因为超链接不能链接公众号之外的文章，请大家复制这个网址之后在浏览器中打开。）
(1). 首先需要全局安装vue-cli(当然，在安装这个之前，首先你需要安装webpack，node，当然使用npm还要大于等于3.0版本的，在amd命令窗口输入npm -v查看npm版本， 如果版本太低，输入命令:npm install npm -g升级npm.(也可以使用淘宝镜像cnpm，但是我不建议使用，因为使用这个会在之后安装依赖有可能出错，具体原因，其实我也不是太清楚，就是要么少装依赖，要么没装，所以还是用npm吧!)，当你npm，webpack，node这些都安装好了的话，那就可以安装vue-cli了，其实在写完这个demo之后，你会发现使用cdn引入式开发也能掌握了，因为我就是用这个demo将基础语法给介绍出来。废话不多说，开始干事:npm install vue-cli -g安装vue-cli。
(2). 全局安装好vue-cli之后，我们开始创建一个vue-demo项目，目前我命名为vue-master;继续使用amd命令：vue init webpack vue-master(这句命令的意思就是初始化一个vue-cli案例)。然后按照如下图:(通常情况下都是默认的enter就是了，值得注意的无非就是eslint依赖和test测试的最好不要选安装，另外vue路由也就是vue-router也要安装，因为这个demo需要用到路由管理页面)
初始化项目好了之后，按照下面提示的走就是了，cd vue-master(这个是指你创建的项目名，在前面我说创建的项目名是vue-master，而图片是我做示例用的旧图不用管名字)，跳转到项目目录下，npm install就是安装依赖呢，因为vue-cli已经初始化了package.json文件，所以要安装的依赖也已经初始化了，所以直接npm install就安装了所有的依赖:
(3). 依赖安装好了之后，我们就可以用编辑器打开项目了，我用的sublime text打开的，目录结构如下图:
(4). 这是一个模板，我们可以输入命令npm run dev启动项目(会自动帮你打开浏览器运行，所以耐心等待就可以了)运行过后如下图:
vue就是vue格式类的文件专用后缀，也就是一个组件，接下来可以尝试修改hello.vue里面的代码，任何语言都是从hello world开始的，所以我们把模板里面的内容删掉，写上自己想用的html标签以及数据内容，如下: (6). 修改后的效果如下图:
(7). 嗯，看来vue-cli项目已经搭建好，而且没有问题了，接下来就是核心的写代码了，欲知后续，下周四见。
睿峰干货： 001：Babel入门教程 002：Webpack使用入门 004：Web开发中表单的处理（1） 睿峰所有课程均可免费试听 开课一周内可免费更换专业 |
|
|
