Vue 的相关配置

vue准备工作

• 下载 node.js http://nodejs.cn/download/

• 安装node.js 并配置到环境变量中
  如何配置:
  配置模块安装路径 和环境变量（否则通过npm安装的插件无法再cmd中使用）

　　　　　　1. 首先安装nodejs ,我的位置是D:\nodejs

　　　　　　2. 你自己可以配置模块安装路径：

　　　　　　　　npm config set prefix “D:\nodejs\node_global”
　　　　　　　　npm config set cache “D:\nodejs\node_cache“。

　　　　　　3. 再去配置环境变量，在系统变量里新建 NODE_PATH ,值为 ”D:\nodejs\node_global“，

　　　　　　4. 在用户变量上的path变量添加 ”D:\nodejs\node_global“。 这样应该就可以了

　　　　　　5. 有些包安装后还是下载到：C:\Users\tom\node_modules 文件夹下**

• 查询 npm 版本

  npm -v
  

• 如果版本小于3.0的版本，需要升级npm

  npm install npm -g
  

• 安装cnpm

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

• 查看cnpm版本

  cnpm -v
  

• 安装vue 最稳定的版本

  cnpm install vue
  

• 安装vue-cli 脚手架(全局安装)

  cnpm install --global vue-cli
  

vue安装项目

• 安装项目

  vue init webpack  项目名称(我在这里起名: mysite)
  

• 接下来是下载过程及操作流程

  / 下载过程...
  ? Project name mysite   # 问你 你的项目名称是叫mysite吗？ Y或者回车
  ? Project description A Vue.js project  # 项目的描述  Y或者回车
  ? Vue build standalone # 选择第一个 直接回车
  ? Install vue-router? Yes  # vue的路由 记得一定是Y
  ? Use ESLint to lint your code? No  # eslint 语法检查的机制 是N
  ? Set up unit tests No  # 是否安装测试模块 不安装N
  ? Setup e2e tests with Nightwatch? No # 不安装 N
  ? Should we run `npm install` for you after the project has been created? (recommended) no   # 选择最后一个带有No的
  
     vue-cli · Generated "mysite".
  
  # Project initialization finished!
  # ========================
  
  To get started:
  
    cd mysite
    npm install
    npm run dev
  
  Documentation can be found at https://vuejs-templates.github.io/webpack
  

• 运行命令

  cd mysite   # 切换目录
  
  cnpm install  # (推荐在这里运行 cnpm ,cnpm安装会比较快)
  
  # 如果你不想用cnpm 用下面的这条指令会比直接跑npm快一些
  npm install --registry=https://registry.npm.taobao.org
  
  npm run dev   # 运行指令
  

vue的指令

• v-bind 等价于 : 绑定属性

  <img :src="src" />
  
  data(){
      return {
          src:"1.jpg"
      }
  }
  

• v-model 双向绑定

  <input type="text" v-model="name">
  
  data(){
      return {
          name:""
      }
  }
  

前后端交互 -- vue配置

• 下载axios

  cnpm install axios
  

• 在main.js配置axios

  // 导包
  import axios from 'axios'
  
  //注册
  Vue.prototype.axios = axios
  

• 同源策略

  只要是协议，主机，端口号有一个不一样那么就不是同源策略
  

• 解决同源策略问题(解决跨域)

  • 前端跨域 config/index.js

    // 
    proxyTable:{
        '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
            target: 'http://127.0.0.1:8000/', //源地址 
            changeOrigin: true, //改变源 
            pathRewrite: { 
              '^/api': '' //路径重写 
              } 
          } 
    }