vue之webapp实战

╰+攻爆jí腚メ 2021-09-15 07:50 338阅读 0赞

一、首先配置开发环境（我的是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可以查看可用的模板列表。

![70][]

![70 1][]

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

![20180425193651599][]

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

![70 2][]

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

![70 3][]

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

![70 4][]

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

![70 5][]

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

二、模拟后台数据

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

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

![70 6][]

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。

![70 7][]

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

![70 8][]

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下！具体放在哪里如图示：

![70 9][]

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

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

三、组件的使用

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

1.创建一个vue文件，这里命名为header.vue。创建好了之后，会自动生成一个vue模板，就是在<template>标签里写HTML语句，在<script>标签里写js代码，在<style>标签里写样式。注意：<template>标签里只能写一个<div>！不能有其他同级的标签！

2.将header.vue文件里的HTML写完之后，便可开始使用这个header组件了，相当于某人要入职工作过程类似。具体使用步骤分四步：

（1）要先清楚你是在哪里应用的这个组件（即找准其应用的母文件）===你即将要在哪工作

（2）在应用它的文件（也是一个vue文件）的<script>标签中写下：import 文件名 from '文件路径'。例如：import header from './components/header/header.vue'。意思是该组件先在这里注册一下，证明有这个组件，也就是导入的意思===入职前把档案袋递交至公司档案处，方便公司获知你的个人信息

（3）然后，注册之后，需要在export default\{\}里面找到挂载点，找到之后再进行进一步命名===人事部知道你的入职信息后，给你分配工作的地方

（4）最后，在指定的地方把组件名字以标签的形式写上去即可===分配完毕之后，自己找到具体的工作地方开始工作

3.将组件导入进去之后，便可在浏览器刷新，查看显示效果。

注意：这里需要提醒的是，每当创建一个vue文件的时候，必须在该文件的<script>标签里写下：export default \{\}！括号中可写可不写，按照需求来。

四、stylus的使用（可选择性使用）

stylus是CSS预处理器之一，它是2010年产生，主要用来给Node项目进行CSS预处理支持，与NodeJS走得很近，与JavaScript联系非常紧密。开发者可以自由选择是否使用。

1.经过上述三个大步骤之后，如果开发中有用到stylus，但是服务器会显示报错，这并不代表你没有安装，因为在安装vue-cli的时候已经把这部分给包含了，至于为什么报错是因为在配置文件中未将stylus信息添加进去。

2.在package.json文件中将以下信息写进去：

"stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",

3.重新在命令控制窗口输入：npm install

4.完成后，最后再输入：npm run dev即可，然后在浏览器中查看效果，会发现stylus的语法能识别了。

五、vue-router的使用方法

Vue中的路由相当于pc里面的锚点超链接，就是点击了某个地方，局部会转向另一个地方。即页面的切换需要用到vue-router（这里的意思是在单页面内进行切换）。而且路由的使用方法跟组件使用方法很是类似。

1.首先要创建各个要转向的页面，即点击某个地方后要跳转的页面（也是vue文件）===即将工作的地方

2.创建完毕之后，需要在router文件下的index.js文件里引入并声明，首先是import 文件名 from '文件路径'。例如：import seller from '../components/seller/seller.vue'，引入之后接下来需要声明路由名字和路径===提交个人信息

3.准备工作完毕之后，接下来便要在目的页面将这几个页面分别用<router-link>标签写进到指定位置===分配工作的地点

4.第四步是与组件使用最大的一个差别，就是路由最后还要进一步渲染页面，即要使用<router-view>标签进行渲染===正式入职

5.下面给出router使用步骤图，第一步是创建，即左边红色框出的部分；第二步是引入，即右上红色框出来的部分；第三步是声明组件名字和路径，左下角红色框出的部分；第四部分见第二张图，放在指定位置（上面三个红色框）和渲染（第四个红色框部分）。

![70 10][]

![70 11][]

6.全部操作完毕之后，在浏览器里就可看到显示效果。

7.补充：上述第五步中，声明组件名字和路径还可以用另一种方式进行，如下图所示：

![70 12][]

六、兼容（适配）各种移动设备的方法。即使用rem单位即可满足所有移动端的适配工作，完美显示相同的布局。这里有个插件可供我们引用：px2rem。很方便的就可以将px单位换算成rem单位，不需要人工去计算去改写。px2rem的官网：[https://www.npmjs.com/package/px2rem][https_www.npmjs.com_package_px2rem]

使用方式：   
1、安装 npm install px2rem-loader 或者 cnpm install px2rem-loader   
2、vue中配置 在build下的 utils.js中，找到generateLoaders 方法，在这里添加 。

var px2remLoader = {
        loader: 'px2rem-loader',
        options: {
          remUnit: 64//设计稿宽度/10
        }
      };
    
      // generate loader string to be used with extract text plugin
      function generateLoaders(loader, loaderOptions) { 
        var loaders = [cssLoader, px2remLoader];//添加px2rem 插件
        if (loader) {
          loaders.push({
            loader: loader + '-loader',
            options: Object.assign({}, loaderOptions, {
              sourceMap: options.sourceMap
            })
          })
        }

3、安装配置结束后，然后在mian.js文件里引入：import 'px2rem-loader'即可；

4、重启项目 。然后再浏览器中查看。会发现自己设置的px被转为rem 了。

5、但是效果是过于浓缩了，读者可自行验证；这里博主建议再安装一个lib-flexible联合使用比较好；

6、首先是要安装npm i lib-flexible --save；然后是引入：import 'lib-flexible/flexible'即可，再次重启查看效果；

7、使用时，为了防止字体大小fontSize出现奇数单位，可将单位px不转为rem 。在fontSize>30px时才转成rem 。   
font-size:26px /\* no\*/ px不转成rem   
font-size:26px px转成rem

本文只是对vue中使用px2rem方式的说明，想要研究原理的请移步到官网或github 。

七、开发剩下的。这部分大家完全可以根据自己的情况进行项目剩余的开发，因为下面的开发基本跟传统的mvc模式差不多，只不过js的写法要服从vue规范才行，也就是说，下面的一些设计都是按照vue的写法来的，这个需要大家线下去学习官网的知识。

八、补充下可能容易犯错的地方

1.引用文件的时候一定要清楚路径！

2.我用的是webStorm编辑器（推荐，很好用），它能智能显示你出错的地方，它会在你错误的地方显示红色的波浪线；另外就是它会把一些变量显示为灰色，如果这些变量没有被使用的话。

3.将获取的数据展示在前端时，一定要记得正确的引用方法，属性和数据的绑定都用v-bind，举个例子，我要使用seller的数据可以这样写：<div class='seller' v-bind:seller='seller'>，也可简写为<div class='seller' :seller='seller'>，记得不要忘记冒号！这里是显示的地方，还没定义seller这个数据对象。这个时候需要在指定的vue文件的<script>标签里写上一个props属性，属性里面定义seller对象，并且seller对象的类型为Object。当然了，一切的前提是你必须先发起请求！不然是获取不到数据的！看图也许更清楚些：

发起请求获取seller全部数据：

![70 13][]

将seller全部数据引用：

![70 14][]

定义seller数据对象：

![70 15][]

具体使用全部数据中指定数据：

![70 16][]

4.项目中主要学习得是技巧和方法而不是单纯的记忆，得有自己独立思考的空间。

[70]: /images/20210522/c1a200ad4fa9499bb567ef66464a6394.png
[70 1]: /images/20210522/60336b126bc949659e0dd2df5fbfb0c6.png
[20180425193651599]: /images/20210522/8e4e6fb0638441f9bca68153541df62e.png
[70 2]: /images/20210522/70f89bc10ce24713ab37e799cc6671ea.png
[70 3]: /images/20210522/b5e6b156f4bc487dbd077ebda3fd926b.png
[70 4]: /images/20210522/7c1653e0661f4cb79f9fed4cdee0a77b.png
[70 5]: /images/20210522/002f3d8db6f341068d73a843a682c475.png
[70 6]: /images/20210522/b54fcf49741941a4ab557c60c8030d6e.png
[70 7]: /images/20210522/3b94ce5976d148deaebc46011fb0732c.png
[70 8]: /images/20210522/2bfb6bfb45b9484192afceef7adedc9f.png
[70 9]: /images/20210522/4ec2222d70a14c86b5931a51d0247aed.png
[Link 1]: https://blog.csdn.net/benben513624/article/details/78562529
[70 10]: /images/20210522/2e629f25bdc64b37a354ff97802d0b2f.png
[70 11]: /images/20210522/3e3b0589e8e74132954b0b7c2509957c.png
[70 12]: /images/20210522/fa11acc69d5a4fa9a645ad149e7d2056.png
[https_www.npmjs.com_package_px2rem]: https://www.npmjs.com/package/px2rem
[70 13]: /images/20210522/1a3716bed6ee40d8974ded023198630e.png
[70 14]: /images/20210522/eb6056fc36d7412aaa2fca4dcbe15b24.png
[70 15]: /images/20210522/e31fa7ba1c014b18b76b57f6262f9321.png
[70 16]: /images/20210522/e57b182166a745039a007c9a6437e309.png