█微信号█:138★0226★9370█ ████代孕正规网█代孕包成功█ ★█代孕包男孩█ ★█中国最早信产部备案的专业代孕网G
一、分页排序案例
后端负责提供接口（3000）
前端负责业务逻辑（8080）
接口地址：从8080跨域到3000拿数据
http://127.0.0.1:8080/api/shouji
分页排序接口： http://127.0.0.1:3000/shouji?page=1&pagesize=5&sortby=price&sortdirection=dao
代理跨域回来的数据接口地址： http://127.0.0.1:8080/api/shouji?page=1&pagesize=5&sortby=price&sortdirection=dao
后端app.js
示例代码
前端main.js
示例代码
新建taobao文件夹存放三要素，然后在文件夹的index.js中引入三要素：
state.js、action.js、mutations.js三个文件：
export default {
...
}
store/index.js
示例代码
state.js存储默认数据：
示例代码
App.vue
示例代码
actions.js
示例代码
mutations.js，此时可以从控制台logger中查看请求数据成功，然后回到App.vue的结构显示数据。
示例代码
回到App.vue显示数据和换页：
示例代码
actions.js
示例代码
mutations.js
示例代码
App.vue下面实现每页显示多少条：
示例代码
actions.js
示例代码
mutations.js
示例代码
下面实现id和价格的排序
App.vue
示例代码
actions.js封装成函数：
示例代码
mutations.js
示例代码
二、Vue-cli
2.1 Vue-cli的安装
Vue 提供一个官方命令行工具(CLI)，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
Vue-cli是Vue的快速起步工具（脚手架工具），再也不用手动配webpack。
Vue-loader的官网：
https://cn.vuejs.org/v2/guide/installation.html
https://vue-loader.vuejs.org/zh-cn/start/setup.html
在全局安装vue-cli：
npm install -g vue-cli
创建一个基于webpack模板的新项目文件夹，并初始化配置：
vue init webpack hello-vue vue init webpack-simple hello-vue
vue init webpack-simple项目默认打包后只有一个html和js文件（适合小项目）
vue init webpack项目默认打包完之后，会有很标准的目录（适合中大型项目）
两种方式初始化Vue-cli项目的目录差别很大，你会发现vue init webpack的方式初始化项目，默认提供了很多webpack的配置，也更加方便你对代理(跨域)、最终打包资源放到服务器什么目录、以及js、css、img和项目在打包过程等优化的配置等。
| vue init webpack |
vue init webpack-simple |
| |
 |
安装依赖：
npm install
启动项目：
npm run dev
2.2 Vue-cli的配置讲解
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
cross-env NODE_ENV=development 将环境变量设置成开发模式
cross-env NODE_ENV=production 将环境变量设置成生产模式
--open 自动开启浏览器
--hot 开启热更新， 热更新就是保存后进行局部刷新
打开项目以后 vue-cli给我们配置了很多东西。
.editorconfig对编辑器的统一配置，是让大家的代码有一个规范、代码缩进形式的统一，当大家提交代码后使用不同的编辑器打开时，显示的代码格式是一样的
root = true [*] charset = utf-8 indent_style = space //空格缩进 indent_size = 4 //统一缩进为4个 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true
关于生产模式的配置
开发过程不需要优化配置，只有在生产模式下，才需要优化、css压缩打包到一个文件，js合并压缩，关于性能优化，小图片会转成base64 减少http请求。
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
将vue-cli提供的src文件夹中的assets图片文件夹，移动到根目录外面去，就是为了不让图片webpack编译打包。
vue中使用图片的两种方式：
第一种：传统方式
<img src="../assets/logo.png">
第二种：使用vue的v-bind指令来使用data数据中的图片：
<img :src="imgSrc">
<script>
export default {
data () {
return {
imgSrc : "../assets/logo.png"
}
}
}
</script>
webpack将png的图片变成base64，使用url-loader
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 8192
}
}
limit是设置一个图片大小的临界点，值小于8192字节的图片就转成base64图片源码，好处就是能减少一个HTTP请求。
2.3项目打包上线
如果把自己的项目放到服务器运行，就需要使用npm run build将自己的项目打包出来。
然后在dist文件夹下面，就有打包、优化好的项目文件、打包好的项目文件可以放到服务器中运行。
注意：项目启动一定要在服务器环境下运行，在webpack服务器、node、phpnow服务器都可以。
三、酷表单项目
main.js
示例代码
第一步：写静态页面组件，App.vue
示例代码
第二步：拆分组件App.vue
示例代码
把单选、多选、下拉分别拆分到singleOption.vue、multipleOption.vue、menuOption.vue中。
组件中的.cbox类名可以不用写了，后面会在App.vue中添加。
第三步：设置题目默认数据和显示到视图（App.vue）
示例代码
下面把数据显示在视图
单选组件singleoption.vue：
示例代码
多选组件multipleoption.vue：
示例代码
下拉组件menuoption.vue：
示例代码
第四步：拖拽
App.vue
示例代码
第五步：题目编辑
main.js
示例代码
App.vue：
示例代码
setarea.vue右侧组件布局：
示例代码
setarea.vue右侧组件功能实现：
示例代码
App.vue 编辑题目按钮：
示例代码
v-model的问题：
1）我们的数据放在全局，全局的数据理论上讲只能有commit()来更改！
2）vue中视图更新的原理和React完全不同，vue使用数据劫持，只要数据变化，视图一定变化。
v-model可以直接和全局的store中的数据进行双向绑定！但是绑定了，就违背了commit()更改数据的原则，管他呢！！
我们可以在computed中写set()和get()方法，让get从store中取值，set发出commit命令。
官网：https://vuex.vuejs.org/zh-cn/forms.html