第一步，前面的描述是相关的。

1.前台技术薪酬介绍

Html5+Css3+Jquery PC 端 移动静态页面 6k-8k

Angular 、 Vue 、React 10k+ Nodejs 13+ 混合 app 开发 Ionic ReactNative 15k+

基金会是免费的。 项目实战赞助

Angular5           https://www.itying.com/goods-232.html

Nodejs+Express 基金会是完全免费的。 https://www.itying.com/goods-240.html

Koa2 教程 https://www.itying.com/goods-800.html Ionic3

模仿京东，Inc.项目实用视频教程 https://www.itying.com/goods-460.html

2.安装淘宝镜(是)

Vue 和 Angular、React 是前端框架 1，单页框架 2基于模块化组件化的开发模型。

Vue 简单 灵活 高效 中国的中小企业大量使用它们。 cnpm 更快地下载程序包。

地址：http://npm.taobao.org/

安装 cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org visual studio code

开发软件

地址：https://code.visualstudio.com/Download

第二步 与安装创建项目相关

3.开始安装

搭建vue 开发环境： https://cn.vuejs.org/v2/guide/installation.html

1，必须安装 nodejs 下载地址：https://nodejs.org/en/download/

2、搭建 vue 开发环境 ，安装 vue 脚手架工具 官方命令行工具

即：在 cmd 中输入 回车 ：

普通npm 脚手架的安装   ： npm install --global vue-cli

淘宝镜安装 脚手架   ： cnpm install --global vue-cli npm install -g cnpm --registry=https://registry.npm.taobao.org (此命令只需执行一次)

3，创建项目 必须 cd 添加到相应的项

vue init webpack vue-demo01

安装完成

cd fengtian_1 (查找项目文件)

cnpm install / npm install / yarn 如果在创建工程时没有错误，则可以省略这一步。(上面的红色方框)

如果报道是错误的 cd 运行到项目中(下图已成功启动)

cnpm install / npm install npm run dev/yarn start

网页打开http：//localhost:8080

成功了！

4，创建项目的另一种方式 （推荐） ***

vue init webpack-simple vuedemo02

cd vuedemo02

cnpm install / npm install (报告错误并输入此文本) npm run dev

第三步 关于移动终端的操作

仅有这些是不够的，这一距离是有反应的app这个框架还很短，所以让我们正式构建一个移动项目。

首先，我们来看看新建成的vue项目结构

可以发现，有assets和static两个文件夹可以存储静态文件，这不会有冲突吗？事实上，它不是，assets静态文件存储在webpack处理时，一般会放一些图片等静态资源，并且static不会收到webpack调用的影响也通过绝对路径调用，该路径通常用于存储一些第三方静态库。

该项目将基于vue-cli将修改项目目录以将其集成。vue-router、vuex、axios，并且可以自动适配移动终端的大小。

路由（vue-router）

项目的路线选择是项目的基础。让我们从布线开始。在开始对项目进行初始化时，vue-router它被引入到这个项目中。上图为src\router里面是路由配置文件。根据个人习惯，我会对上面的目录结构进行调整，如下

新建page目录存储主逻辑页，components存储公共组件，router统一管理路由

如图所示，引入了一个新页面，可以通过以下方式访问路由跳转this.$router.push(/Home)

路由vue-cli它几乎已经打包好了，但没有什么需要改变的。接下来我们再来看一看。vuex

第四步 vuex(状态管理模块)

关于vuex官方网站也给出了更详细的介绍。如果你对它的功能不太了解，请参考它。 什么是vuex ，这里只说如何融入到项目中，并简要介绍它的用法

关于vuex 提交人本人必须详细解释 vuex 最完整的使用策略

（1）安装vuex

npm install vuex --save / cnpm install vuex --save / yarn add vuex --save

（2）配置vuex

根据个人发展习惯，该项目。vuex配置也不一样，但大同小异，差别也很大。例如，官网推荐actions写入异步操作更改state状态，但我仍然倾向于将诸如请求数据之类的异步操作放入。store外部行动，在通行证。commit要更改状态，将在下面的数据请求模块的包中提及。

别胡说八道了，看看下面的图片。

首先，创建一个状态文件夹来管理整个状态；modules每个模块的状态分别写入，如下所示

 1 /**
 2  * home.js
 3  * 用于home模块的状态管理
 4  */
 5 import * as types from ../mutation-type  // 引入定义的方法
 6 const home = {
 7   state: {
 8     number: 1
 9   },
10   mutations: {
11     [types.SET_NUM](state, num) {   // 修改state 可通过mapMutations调用
12       state.number = num
13     }
14   },
15   actions: {},
16   getters: {            // 定义getters，可以通过mapGetters扩展函数调用
17     number: state => {
18       return state.number
19     }
20   }
21 }
22 export default home    // 输出home模块

mutation-type定义了一些修改state方法，如下所示

在index.js统一输出，如下所示

 1 import Vue from vue
 2 import Vuex from vuex
 3 import home from ./modules/home
 4 import createLogger from vuex/dist/logger
 5 
 6 Vue.use(Vuex)
 7 const debug = true
 8 
 9 export default new Vuex.Store({
10   modules: {
11     home
12   },
13   plugins: debug ? [createLogger()] : []   // 是否开启vuex的debug模式
14 })

这里有一个vuex如上所示，内置插件可以在每次打开后状态改变时进行更改。console查看下图中的修改信息

这里的index配置完成后，需要main.js注册到

通过以上步骤，您可以使用项目中的状态。这里home.vue例如，查看以下代码

 1 import {mapMutations, mapGetters, mapState} from vuex  // 引入map方法
 2 export default {
 3   data () {
 4     return {
 5       num: 0
 6     }
 7   },
 8   methods: {
 9     ...mapMutations({            // 调用setNum方法
10       setNum: SET_NUM
11     }),
12     increase() {
13       this.num++
14       this.setNum(this.num)      // 将this.num转入setNum
15     }
16   },
17   computed: {
18     // ...mapGetters([           // 通过getters获取state数据
19     //   number
20     // ]),
21     ...mapState({                // 通过state获取state数据
22       number: state => state.home.number
23     })
24   }

到这里vuex介绍到此结束，让我们继续查看数据请求模块(axios）

第五步 axios(数据请求模块)

axios(数据请求模块)

之前vue数据请求模块使用vue-resource，官不推荐，弃之不用；axios集成步骤，以及需要注意的几点。

（1）安装axios和js-cookie

npm install axios --save

（2）配置axios

在src目录下的新内容apiconfig文件夹，用于封装请求并定义有关请求的一些全局变量；api文件夹，用于分别声明每个模块的请求方法，如下图所示

第六步 axios 项目改编

flexible.js采用的适应化计划rem布局，根据屏幕分辨率大小调整根元素html的font-size为了实现每个元素的宽度和高度的自动变化，适应不同的屏幕

1.安装lib-flexible.js

npm install lib-flexible --save

2.在项目条目文件中main.js中引入lib-flexible

import lib-flexible/flexible

使用less作为css预处理器，首先安装less

（1）安装less和less-loader

npm install less less-loader --save-dev

（2）配置less

在build/webpack.base.conf.js 的module.exports.module.rules 里面添加

1 {
2     test: /.less$/,
3     loader: style-loader!css-loader!less-loader
4 },

然后在组件中使用时，在style在标签上添加 lang="less"，可以正常使用less在这里，我们介绍几个初始化项目。less文件，在src下面创建styles文件夹中，放入以下文件

在每个组件中。style在标签中引入index.less和variable.less

 1 

然后，当写关于像素样式的时候，他们都在那里。mixin.less根据定义，可以实现所有移动终端的适配问题。

1.方法一：rem 布局

在正门：index.html， 在标签上添加以下内容JS 代码：(在标准中实施 375px具有宽度调整功能，100px = 1rem。）

---

2.方法2：lib-flexible 插件实现

1，安装插件

npm i lib-flexible --save        // 载lib-flexible
npm install px2rem-loader        // 安装px2rem-loader

2、在main.js中引入lib-flexible

import lib-flexible/flexible

3、在 index.html 添加：移动适配 meta标签

//注意两者之间的区别，建议添加以下内容meta不管怎样，点击输入框，页面会自动缩放

4，更改配置

在 build/util.js 中 更改如下

（1）、将px2rem-loader添加到cssLoaders中

const cssLoader = {
loader: css-loader,
options: {
minimize: process.env.NODE_ENV === production,
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: px2rem-loader,
options: {
//一般设置75
remUnit: 35
}
}

（2）、在generateLoaders添加的方法px2remLoader

function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

if (loader) {
loaders.push({
loader: loader + -loader,
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: vue-style-loader
})
} else {
return [vue-style-loader].concat(loaders)
}
}

总结需要修改的地方

添加位置.png

5、重启

npm run dev    // 重新运行

此处请注意：

1、 lib-flexible：是 rem 自适应插件。(示例：750px == 10rem）
2、px2rem-loader ：这是为了写作方便CSS时，输入 px 会 自动转为 rem。
3、有时 用 ‘px2rem-loader ’ 插件，找到 rem 转换不正确。可能是开发工具已经设置了其他插件转换，只是将其他插件转换设置为所需的转换。[我遇到了，巨大的坑...]