Charles_Tian

vue之webapp实战

一、首先配置开发环境（我的是win7+64位操作系统）

1.先下载并安装node.js。点击windows键，在输入栏输入cmd，打开控制命令窗口，随后输入node -v然后回车查看node的版本，若显示node的版本，则表示node安装成功；

2.然后安装vue-cli。在控制命令窗口输入：npm install -g vue-cli。然后等待安装完毕。注意：如果是mac环境下，要在前面加上sudo,即输入：sudo npm install -g vue-cli。安装完毕之后，输入vue，然后会显示以下图示信息，然后再输入vue list可以查看可用的模板列表。

3.下载模板。这里下载的是webpack，输入vue init webpack sell(这个sell是项目名称，根据自己的项目自行取名)，然后回车。这里强烈建议大家不要使用台式机！就是win7+32位操作系统。不然会出现以下错误信息！博主找了很多方法都不管用！最后用笔记本一下就好了！（win7+64位操作系统）

正常的界面应该是这样的，会直接显示项目名字

4.随后按照操作一步一步往下走即可，项目描述（sell app），作者等按照自己的需求来。ESLint是一个代码规范工具，vue路由是要安装的，unit tests和e2e tests可以跳过不用安装。下面的一个问号意思现在可以安装项目依赖了吗？直接回车等待安装就好了。

5.安装完毕之后，首先要进入创建项目的文件夹，即输入cd sell，进入之后，然后再输入npm run dev，会出现一行提示信息：You application is running here:http://localhost:8080。然后打开浏览器在地址输入栏输入localhost:8080就可以显示项目页面了。

6.在浏览器输入localhost:8080后会出现以下界面。这个界面是默认的，我们可以在项目文件里修改成我们自己的。

至此，我们的开发环境搭建完毕。但是接下来才是真正磨炼耐心的时候。

二、模拟后台数据

我们都知道，环境搭建好了，只需要好好看看官网文档就可以学习编写web app了，但是你需要数据去支持你的设计，所以在设计之前你需要先模拟后台，看是否前台能访问到你写的假数据，这样对你的开发会有很大的方便和帮助。

1.直接将写好的数据，放在根目录下，这里我的项目假数据是data.json，记得是json数据格式。

2.既然有了数据库，那么我们在开发的时候直接访问data.json文件里的数据即可，那么接下来需要用到vue-resource，因为vue实现ajax获取后台数据是通过vue-resource的，这个在官网里应该可以查找的到。所以既然要用到vue-resource，那么我们必须要先安装才行。在控制命令窗口输入：npm install vue-resource --save

3.安装完成以后，需要在需要用它的位置引入它才行。那么用到它的位置到底是啥文件呢？这个大家应该可以想到，肯定是在app.vue里引用，因为app.vue是整个单页面应用的最外围框架。但是这里引入的代码肯定是用js写的，那么肯定是写在js文件里的，而与app.vue同级的文件只有main.js，所以要写在main.js文件里才ok。

4.在main.js里写下：import VueResource from 'vue-resoucre';这句是引入vue-resoucre，还不是用，还要写下一句代码：Vue.use(VueResource)才算是对vue-resoucre的真正使用。

5.现在是模拟好后台数据环境了，那么接下来是要搭建一座用于联系前端和后台的桥梁，也就是我们要访问数据对应的api，那么怎么搭建呢？在配置文件webpack.dev.conf.js文件里开始搭建，即直接将下列代码复制粘贴上去即可。

const appData = require('../data.json');
const seller = appData.seller;
const goods = appData.goods;
const ratings = appData.ratings;

    before(app) {
      app.get('/api/seller', function (req, res) {
        res.json({
          errno: 0,
          data: seller
        })
      });
      app.get('/api/goods', function (req, res) {
        res.json({
          errno: 0,
          data: goods
        })
      });
      app.get('/api/ratings', function (req, res) {
        res.json({
          errno: 0,
          data: ratings
        })
      });
    },

注意：下面的这一段代码需要放在devServer下！具体放在哪里如图示：

6.这个时候桥梁已经搭建完毕，在命令控制窗口下输入:npm run dev运行之后，在浏览器地址栏输入localhost:8080/api/seller或者localhost:8080/api/goods或者localhost:8080/api/ratings，就可看到对应的数据。

7.mock数据（模拟后台）详细信息可以参考链接：点击打开链接

三、组件的使用

初期用vue学习项目的时候或者新手学习得时候很容易对组件的使用模糊不清，就是好像是跟着官网文档走了一遍，最后还是无法实现组件的效果，觉得很是麻烦，或者就直接没有动力学下去了。这里总结下组件的使用几个步骤。

1.创建一个vue文件，这里命名为header.vue。创建好了之后，会自动生成一个vue模板，就是在

vue之webapp实战

你可能感兴趣的:(vue实战)