学习vue记录

最近写个小玩意，pc用iview2，移动端vux，后台yii

/**

插个队

1.装环境

1.1使用nvm

到github上下载最新版本https://github.com/coreybutler/nvm-windows/releases

1.2安装好修改源

去文件夹里找到settings.txt

加两行

node_mirror: https://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/

1.3下载node

1,nvm nvm list 是查找本电脑上所有的node版本

- nvm list 查看已经安装的版本
- nvm list installed 查看已经安装的版本
- nvm list available 查看网络可以安装的版本

2,nvm install 安装最新版本nvm

3,nvm use <version> ## 切换使用指定的版本node

4,nvm ls 列出所有版本

5,nvm current显示当前版本

6,nvm alias <name> <version> ## 给不同的版本号添加别名

7,nvm unalias <name> ## 删除已定义的别名

8,nvm reinstall-packages <version> ## 在当前版本node环境下，重新全局安装指定版本号的npm包

9,nvm on 打开nodejs控制

10,nvm off 关闭nodejs控制

11,nvm proxy 查看设置与代理

12,nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror，如果不设置的默认是 https://nodejs.org/dist/
　　nvm npm_mirror [url] 设置或者查看setting.txt中的npm_mirror,如果不设置的话默认的是： https://github.com/npm/npm/archive/.

13,nvm uninstall <version> 卸载制定的版本

14,nvm use [version] [arch] 切换制定的node版本和位数

15,nvm root [path] 设置和查看root路径

16,nvm version 查看当前的版本

nvm install <version> 

例如： nvm install 10

然后 nvm use 10

1.4通过npm把vue装上

npm install -g vue-cli

1.5试着随便装个项目

vue init webpack 'testVue'

1.6有时候会遇到npm版本不合适，高了或低了

    npm view npm versions    查看npm所有版本

    npm view jquery version    查看jquery最新版本

    npm install npm@latest -g    全局安装最新版npm，latest换成上一步的版本号安装对应版本

    npm install npm@next -g    全局安装最新测试版npm

    npm init    生成一个package.json

**/

1.先说一下vux

先把项目搞下来

vue init airyland/vux2 projectPath

 首先是router的问题，他把router直接写到入口文件main.js了。稍作修改：

import Vue from 'vue'
import FastClick from 'fastclick'
import VueRouter from 'vue-router'
import App from './App'
import store from './store'
import routes from './router/index'

Vue.use(VueRouter)

FastClick.attach(document.body)

Vue.config.productionTip = false

new Vue({
  router: routes,
  store: store,
  render: h => h(App)
}).$mount('#app-box')

（1）import routes from './router/index' 

（2）把router放到实例化的Vue中

（3）把之前的那个删掉

（4）不能用？看看store的s，要小写都要小写

（5）打包的时候，在config的index.js中的assetPublicPath，改成'./'

下一个是vuex

（1）在src下新建store目录，在下面新建个 index.js，他长这样

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {},
  mutations: {
    handletest(state) {
      state.test = 1;
    }
  },
  actions: {},
  modules: {}
});

export default store;

（2）在入口文件加入store

（3）页面中，修改state：this.$store.commit('handletest')，调用：this.$store.state.test

2.这里是iview2

2.1.主要是跨域

我在yii的入口文件加了两行代码，设置请求源和允许通过的头部标识

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorizationuser');

2.2.今天遇到 一个奇葩的问题

从ajax请求到的数据渲染不到页面上

强制渲染吧那就，这个 this.$forceUpdate(); 

问题虽然解决了，但是并没有找到问题所在。有空再看吧。

3.yii

yii的restful，文档里写着支持各种请求方式，包括PUT和PATCH。但是实际中，应该是我没有配置好，这俩方法怎么都去不了后台。不想浪费时间了，改成了post请求。支持get、post、detelt、options这四种

4.百度编辑器

https://github.com/HaoChuan9421/vue-ueditor-wrap
https://www.npmjs.com/package/vue-ueditor-wrap

两个地方，第一个是serverUrl，我是直接把php那个文件夹放到index.php同级，然后直接用接口域名下的php/controller.php。第二个是config.json里把前缀加上，就是接口域名，反正 imageUrlPrefix和imagePathFormat连起来就是图片路径。

5.放服务器上

yii2，用的lnmp，有个错是直接500，看不到报错信息，是php开启的报错等级问题。方法1，在入口文件加入

ini_set('display_errors', '1');
error_reporting(E_ALL);

好歹能看到报错了

方法2当然是去.ini修改了

报错说找不到那个文件，我先入为主了，以为是配置错误，在网上搜。那个fastcgi文件里也是对的。还有就是nginx.conf中引入rewrite中的一个文件，这个是路由重写的，看仔细了引入。最后实在发现不了，一看目录，根本就没那个文件。用git上传的，可能是上传的时候出错了。又传了一遍，ok了。