vue项目全了解

1创建vue项目

0 先安装nodejs

1 全局安装vue-cli

    npm install --global vue-cli 
    或（cnpm install --global vue-cli）

2 cd + 你想安装的路径
例如：cd /Users/liuxiaofei/Desktop/Total/work/web

3 安装初始项目vue init webpack+名称

    vue init webpack mypropost

    后面会显示：
    ? Project name demo_project
    ? Project description test
    ? Author 刘晓飞 <>
    ? Vue build standalone
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? No //后续要装，现在不装因为很严格的格式要求
    ? Set up unit tests No //测试用的，不装
    ? Setup e2e tests with Nightwatch? No //测试用，不装
    ? Should we run `npm install` for you after the project has been created? (recom
    mended) npm

4 cd进项目

    cd mypropost

5 安装所有依赖

    npm install

6 运行vue项目

    npm run dev

2vue项目常用插件

1 axios

为什么要用axios?

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止CSRF/XSRF

//安装
npm install axios --save

//在main.js中引入
import axios from 'axios'

//再main.js获取axios对象
Vue.prototype.axios = axios

//在main.js添加可以全局设置，之后就可以不用填域名头和请求头
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 在main.js添加可以全局拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

注意：
axios的post请求只接收form-data格式

1 form-data格式：
就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开.既可以上传键值对,也可以上传文件.当上传的字段是文件时会有Content-Type来表名文件类型;content-disposition用来说明字段的一些信息;
由于有boundary隔离,所以multipart/form-data既可以上传文件也可以上传键值对,它采用了键值对的方式,所以可以上传多个文件.
如：?name=iwen&age=20

2 x-www-form-urlencoded格式：
就是application/x-www-from-urlencoded,会将表单内的数据转换为键值对,比如 : name=Java&age = 23
如：{name:”iwen”,age:20}

2 qs

qs是vue项目自带，无需安装，但要引入

//可以在main.js内全局引入和获取对象
import qs from 'qs'

Vue.prototype.qs = qs

qs是用来做序列化的，JSON.stringify也是做序列化处理的，但你要知道他们序列化的结果是不一样的。

var a = {b:1,c:2}
qs-->"b=1&c=2"（这个叫query字符串吗）
JSON.stringify: {"b":1,"c":2}（json字符串）

3element

//下载
npm i element-ui -S

//按需引用需要使用到的组件
npm install babel-plugin-component -D

//然后，将 .babelrc 修改为：（根据element文档来，可能有更新）
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

//按需引入要用的模块，可直接放在main.js，模块名参考element文档
import { Button, Select } from 'element-ui';

//使用，可直接放在main.js
Vue.use(Button)

4less

//安装less
npm install --save-dev less less-loader

//配置less: 路径：build---webpack.base.conf.js的module对象添加
{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader"
}

//使用，在要使用的页面的style加
lang = "less"

5vuex
vuex相当于设置全局变量，而且也是可以实时多个页面数据共享

6vux
vux需要注意点击按钮的触发要用@click.native,只用@click触发不了

<x-button class="xbuttonView1" @click.native="greet()">下一步</x-button>

3注意点

1请求跨域问题解决（可通过CMD命令ipconfig 查看MAC地址）

1/config/index.js的proxyTable对象内加相应跨域信息

        '/SSMSC': {
            target: 'http://192.168.31.161:80/SSMSC',//设置你调用的接口域名和端口号 别忘了加http
            changeOrigin: true,
            pathRewrite: {
              '^/SSMSC': '/SSMSC'//这里理解成用‘/SSMSC’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/SSMSC/user/add’即可
            }
          }

2在main.js内添加host

Vue.prototype.HOST = "/SSMSC"

3上面2步即配置完成
在其它页面调用this.HOST即可直接使用

var url = this.HOST + "/subscription/newDrug";
this.axios.post(url, this.qs.stringify({
    drug_name: this.form.drug_name
}), {
    headers: {'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'}
    })
    .then(res => {
          this.show2 = true;
    })

2vue的过滤效果
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

//在双花括号中
{{ message | capitalize }}

//与data同级
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

//也可以在main.js里全局配置过滤器
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

3router配置

//主要在src\router\index.js中配置路由，先引入地址
import IntegralManagement from '@/components/IntegralManagement/IntegralManagement'

//再在router里面配置信息
    routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path: '/IntegralManagement',
      name: 'IntegralManagement',
      component: IntegralManagement
    }
  ]

//配置完后可调用下语句直接跳转页面
this.$router.push('/IntegralManagement')

//也可使用 <router-link> 映射路由
<router-link to="/IntegralManagement">IntegralManagement</router-link>

4钩子函数与methods:{}同级
mounted(){} （每次进入页面都会调用）
created(){} (只会在第一次创建调用)

1创建vue项目

2vue项目常用插件

3注意点

猜你喜欢