推荐阿里云服务器 https://promotion.aliyun.com/ntms/act/vm/aliyun-group/buy.html?group=ikkX4HvsKN
摘要:本篇文章,是在学习了另一篇博客之后自己进行总结性的整合,一是因为原来的是教程博客是有5篇的,二来呢也是想要自己学完之后在巩固一下,本篇的所有代码我都是以截图的形式上传,不会在里面放上代码,这样让读者可以能够手打加深印象。
一.准备工作
首先,要开始工作之前,还是需要把环境搭建好。我这里的环境是windows,如果你是mac,请自己确保环境没有问题。
windows+nodejs+npm环境是必备的。另外需要文本编辑器,我使用的是sublime,当然,你可以使用其他的,都没有关系。只
是,nodejs是必须要安装的。
各个系统安装不一样,照着安装说明一步一步来就好了这里就不在阐述了,详情参考:nodejs 官方网站
安装好nodejs 之后,调出终端,快捷键为win+R键后输入cmd在按回车键就好,在终端下面输入命令node -v会有版本号出来。就说明安装成功了。输入npm -v也会有版本号出来,就说明,npm也已经安装好了。
因为npm在国内是会有点慢的,所以这里要讲npm改为国内的镜像(淘宝镜像居多),具体的方法网上教程都有(淘宝镜像)
有了Nodejs环境,则我们可以开始了。
接下来进行vue-cli脚手架工具的安装,其模板可以通过 vuejs-templates 来查看。(有个前提,要稍微懂点DOS命令行的基本的命令,如cd,cls等)
(-g为表示全局安装,即不管你在哪个文件夹创建都能表示已经安装引用到vue脚手架)
安装完vue-cli脚手架工具之后,开始正式创建项目了。进入自己要项目要创建的位置,我这里是在E盘就直接输入e:进入E盘。
进入自己项目要创建的目录后按照下面的命令逐条输入,新建自己的项目:
输入命令按回车键会后,会有一些提示,是什么不用管,按照下面我提供的进行操作即可
如上图所示,就说明我们的项目构建成功了。并且,给出了下面要执行的命令,我们来逐条执行:
执行npm install需要一点时间,因为有些会从国外服务器上下载代码之类的,所以这边直接一开始替换国内的镜像,用cnpm install代替进行节省时间。安装完成后,终端如图:
最后,执行下面一句,把项目跑起来
如上:四行命令,就可以把一个名为vuedemo的项目跑起来。当然,这个名字你是可以随便起的,根据你的实际项目来定。
通过上面的这些命令,我们就通过vue+webpack创建了一个名为vuedemo的项目。在运行了cnpm run dev之后,会自动打开一个浏览器窗口,可以看到具体的效果了。
二.目录以及文件结构
如上图所示,我们的目录结构就是这样的了。
目录/文件 | 说明 |
---|---|
build | 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管。 |
config | 配置目录,默认配置没有问题,所以我们也不用管 |
node_modules | 这个目录是存放我们项目开发依赖的一些模块,这里面有很多很多内容,不过高兴的是,我们也不用管 |
src | 我们的开发目录,基本上绝大多数工作都是在这里开展的 |
static | 资源目录,我们可以把一些图片啊,字体啊,放在这里。 |
test | 初始测试目录,没用,删除即可 |
.xxxx文件 | 这些是一些配置文件,包括语法配置,git配置等。基本不用管,放着就是了 |
index.html | 首页入口文件,基本不用管,如果是开发移动端项目,可以在head 区域加上你合适的meta 头 |
package.json | 项目配置文件。前期基本不用管,但是你可以找一下相关的资料,学习一下里面的各项配置。至少,要知道分别是干嘛的。初期就不管了。 |
README.md | 不用管 |
如上,基本上就是这么个情况。重要的,还是src文件夹。src文件夹的情况如下所示:
commponents目录里面放了一个演示的组件文件,你可以打开看下。当然,也可以直接删除,然后根据我的博文往下走。
App.vue是项目入口文件。当然,我们需要改造,改造成我们可以使用的样子的。
main.js这是项目的核心文件。全局的配置都在这个文件里面配置。
接下来请照下文提供的src目录对src文件夹的文件进行整合,虽然你也可以用自己的但是这边博文是照着这个来的,所以你懂得:
如上图所示,把文件夹和文件都新建好,后面的博文我会详细给出每个文件的代码的。这里,都新建空文件即可。
文件\目录 | 说明 |
---|---|
component | 组件文件夹我们写的一些公用的内容可以放在这里的。 |
config | 核心配置文件夹 |
frame | 存放自路由的文件夹 |
page | 项目模板文件夹,所有的页面文件全部存放与此,后面会根据需要来建立各种子目录 |
style | 样式存放目录 |
vue支持每一个模板里面写css,这样可以做到随用随取。但是,我个人不太喜欢这样,我还是喜欢把css给单独放出来,因为这样便于整理。
三.配置路由
src目录都已经整完了,现在开始先整2个页面练练手先,我们在src/page目录下面新建两个文件,分别是index.vue和content.vue。
我们还是利用 http://cnodejs.org/api 这里公开的api
来做项目。不过本章节不涉及调用接口等内容。
//index.vue
//content.vue
接下来,我们需要安装VueRouter2
到我们的项目。参考文档见VueRouter2安装文档
在终端中,我们把当前目录跳转到我们的项目,然后执行命令。如下:
我们查阅文档,会知道,命令是npm install vue-router(国内镜像为cnpm install vue-router),后面加一个-D的参数是为了让我们的安装的vue-router这个插件写入到package.json配置文件中。以便于下次再其他地方安装的时候,可以一并安装进去,否则,还得再安装一遍。
通过在终端中执行命令,我们已经安装好路由了。下面,我们需要在src/main.js
文件中进行配置。
入口文件肯定和默认的不一样,src/App.vue的配置文件如下:
这个只是一个单纯的路由入口页面。比较特殊的是,下面我 import了一个scss文件。我喜欢把css独立出来,而不是写在一起,所以我之前在src目录下面建立了一个style的文件,里面放scss文件。
我建议你先跟着我走,回头自己根据自己的习惯调整。
下面我们配置路由文件src/config/routes.js
如上,我们引用模板,然后再配置路由,这里,我们没有涉及自路由的内容,我们先这样配置上。然后,我们就可以在终端里面输入cnpm run dev 来看我们做的效果了。
这里有个问题,如果一开始大家都安装了ESLint,这边就会报一大堆的错误,因为ESLint是一种检查错误插件,而我们的代码上大部分的格式是错误的,so,这里会包一大堆的错误。解决方法就是打开根目录下面的/build/webpack.base.conf.js文件,找到如下代码全部注释掉就OK了:
然后我们在跑,还是有错误
这到底是什么依赖呢,接着再逐条进行查阅,联系上下文,说明这边缺少了sass-loader插件以来。
OK,缺什么装什么
如上图所示,就安装好了。
安装好了再跑,这回又提示我们缺少node-sass插件。那就继续装呗
如上图所示,就安装好了。安装好了再跑。OK无错误,运行成功。
四.接通Api
我们打开src/page/index.vue文件,在这里写入下面的代码:
再来配点css稍微美化下页面,新建文件, src/style/base/_index.scss,输入下面的内容:
然后在 src/style/scss/style.scss中输入
接下来就是调用Api了。首先,我们编辑 src/main.js ,引用 src/config/api.js。如下:
具体的位置的话,我这里直接放上main.js的完整代码截图
要请求接口,就必须有相对应的组件。如果你使用过jQuery
,应该熟悉其中的AJAX方法。当然,在vue中,我们就不考虑使用jquery了。我们使用superagent这个组件。安装的方法的和上文提到的安装vue-router插件的方法一样,直接在根目录输入如下的命令按回车即可:
有了工具了,我们就需要来编写api.js文件,使它可以完成我们想要的工作。
这个文件就有点狂拽酷炫吊炸天了。目前,我们测试cnodejs.org的接口,我调整的是只适用于这边的是用,如果在其他的项目中是要重新调整,调整到适和你的项目的代码。我调整得可以使用。主要是根据接口返回的内容进行各种判断和处理,其中主要的框架代码是不用动的。
如果你JS基础过硬,一看就懂,如果不行,就慢慢看,慢慢理解吧。反正我这里不说明了,不然文章就长了。
编辑src/page/index.vue
文件,代码如下:
保存后,项目跑起来,在浏览器中,就可以看到渲染出来的列表了。如下图所示:
五.配置子路由
打开编辑src/frame/subroute.vue文件,编辑代码如下:
接着在src/page文件夹下新建文件夹user,然后在里面新建三个文件index.vue,info.vue和love.vue。代码内容分别如下:
//index.vue
//info.vue
//love.vue
打开src/config/routes.js文件,这个文件就是配置所有路由的文件。首先,在顶部插入下面的代码,引用子路由文件
然后,我们需要引入我们前面写的三子页面模板。代码如下:
引好这些文件之后,我们就开始配置子路由了。
完整的代码如下:
保存好之后,我们通过浏览器访问一下,截图如下:
总结:本测试项目github地址是 https://github.com/Jimtan-Yu/vuedemo,不过我还是希望大家能够自己动手打出来而不是clone一下了事,因为你动手打了能够加深自己的印象。
详细版的请点击链接:http://blog.csdn.net/fungleo/article/details/53171052
推荐阿里云服务器 https://promotion.aliyun.com/ntms/act/vm/aliyun-group/buy.html?group=ikkX4HvsKN