vue项目目录介绍

1.myfirstvue---项目名
2.node_modules---项目依赖的模块
3.public
	favicon.ico---网站小图标
	index.html---spa：单页面应用
4.src---操作页面
	assets---静态资源css js html
    	logo.png---静态资源页面图标
	components---小组件 用在页面组件中
    	HelloWorld.vue---组件
	router---装了vue-router自动生成
    	index.js---vue-router的配置
	store---装了vuex自动生成
    	index.js---vuex的配置
	views---组件
    	AboutView.vue---关于 页面组件 
		HomeView.vue---主页 页面组件
	App.vue---根组件
	main.js---项目启动入口
5 .gitignore---git忽略文件
6. babel.config.js---babel的配置
7. jsconfig.json
8. package.json---当前项目的所有依赖类似于python--requirements.txt
9. package-lock.json---锁定文件 文件中写了依赖的版本 这个文件锁定所有版本
10. README.md---说明 项目介绍
11. vue.config.js---vue项目的配置文件

es6的导入导出语法

1.导出：
1.1 默认导出：export defalut
1.2 命名导出：export const name = ‘导出’
2.导入：
2.1 使用默认导出后导入：import 名字 from ‘导出文件的路径(如果在index.js中只需要写到上一层 index.js相当于包中的__init__)’
2.2 使用命名导出后导入：import {名字} from ‘导出文件的路径’
3.代码：

  3.1 默认导出与导入：
      导出：
   export default{
    name:'lili',
    printName(){
        console.log(name)}}
		导入：
    import zq from './lyt/drdc'
	console.log(zq.name)	
  3.2 命名导出与导入：
     导出：
    var name = 'lili'
	export const printName = () => {
  	console.log(name)}
    导入：
    import {printName} from './lyt/drdc'
	console.log(printName())

vue项目开发规范

1.单页面组件：使用xx.vue–页面组件和小组件
2.单页面组件构成：

—html内容写在里面

—写js内容

—写css样式

3.项目入口：main.js
3.1 把App.vue根组件导入了
3.2 使用new Vue({render: h => h(App)}).$mount(‘#app’) 把App.vue组件中得数据和模板，插入到了index.html的id为app div中了
3.3 在每个组件的export default {} 写之前学过的所有js的东西
3.4 在每个组件的template，写模板，插值语法，指令
3.5 在每个组件的style，写样式

vue项目集成–axios

1.安装axios—npm install axios –S(S相当于save)
2.导入：import axios from ‘axios’
3.发送请求 获取数据

  created() {
    axios('http://127.0.0.1:8000/book/').then(res=>{
      console.log(res)
      this.res=res.data
      console.log(this.res)
    })}
4.方式一：解决跨域(django项目)
  1.安装：pip3 install django-cors-headers
  2.app中注册： 
    INSTALLED_APPS = (
                ...
                'corsheaders',
                ...
            )
  3.中间件中注册：
    MIDDLEWARE = [
        ...
        'corsheaders.middleware.CorsMiddleware',
        'django.middleware.common.CommonMiddleware',
        ...
        ]
  4.配置文件配置：
    CORS_ORIGIN_ALLOW_ALL = True
            CORS_ALLOW_METHODS = (
                'DELETE',
                'GET',
                'OPTIONS',
                'PATCH',
                'POST',
                'PUT',
                'VIEW',
            )
            CORS_ALLOW_HEADERS = (
                'XMLHttpRequest',
                'X_FILENAME',
                'accept-encoding',
                'authorization',
                'content-type',
                'dnt',
                'origin',
                'user-agent',
                'x-csrftoken',
                'x-requested-with',
                'Pragma',
            )
5.登录案例：
5.1 django：
    class Login(ViewSet):
        @action(methods=['post', ], detail=False)
        def login(self, request):
            username = request.data.get('username')
            password = request.data.get('password')
            user = User.objects.filter(username=username, password=password).first()
            if user:
                return Response({'code': 100, 'msg': '用户登录成功'})
            return Response({'code': 101, 'msg': '用户名或密码错误'})
5.2 vue项目中
router/index.js中注册页面
	{path: '/dl',
    name: 'dl',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/dl.vue')
  },
 js页面中发送axios请求
    <template>
    <div id="app">
      <p>用户名：<input type="text" v-model="username"></p>
      <p>密码：<input type="password" v-model="password"></p>
      <button @click="handleClick">提交</button>{{res}}
    </div>
    </template>
    import axios from 'axios'
    <script>
    import axios from "axios";
    export default {
      // name: "dl",
      data(){
          return{
            res:'',
            username:'',
            password:''
          }
      },
      methods:{
        handleClick(){
           axios.post('http://127.0.0.1:8000/user/login/',{
             username:this.username,
             password:this.password
               }
           ).then(res=>{
          console.log(res)
          this.res=res.data
          console.log(this.res)
        })
        }
      },
    }
    </script>

props配置项

1.父传子自定义的属性:
1.1 数组写法
1.2 对象写法
1.3 对象套对象写法
2.步骤：

  2.1 普通使用(数组写法)
  	props: ['msg'],
  2.2 属性验证(对象写法)
  	props: {msg: String},
  2.3 指定类型，必填和默认值(对象套对象写法)
  	props: {
    	msg: {
      	type: String, //类型
      	required: true, //必要性
      	default: '老王' //默认值}},
3.代码：
  3.1子组件：
        <template>
        <div>
          <button>后退</button>
          {{title}}--->{{msg}}
          <button>前进</button>
        </div>
        </template>

        <script>
        export default {
          name: "child",
          // props:['msg',],
          // props:{
          //   msg:String
          // },
          props:{
            msg:{
              type:String,//类型
              required: true, //必要性
              default:'lili'//默认值
            }
          },
          data(){
            return{
              title:'首页'
            }
          }
        }
        </script>
 3.2 父组件：
    <template>
      <div id="app">
        <h1>App</h1>
        <child :msg="true"></child>
      </div>
    </template>
    <script>
    import child from "@/components/cj"
    export default {
      name:'App',
      components:{
        child
      }
    }
    </script>

混入

1.混入：mixin(混入) 可以把多个组件共用的配置提取成一个混入对象
把多个组件中公用的东西，抽取出来，以后可以全局使用和局部使用—类似于父类
2.使用步骤：

	2.1 写个mixin/index.js
        export const ds = {
            data() {
            return {
              name: 'lili'
            }
          },
            methods: {
                handleClick() {
                    alert(this.name)
                }
            },
        }
    2.2局部导入：在组件中(@/mixin--@是src文件夹路径)
        import {ds} from "@/mixin";
        mixins:[ds,]
    2.3 全局使用，在main.js 中  以后所有组件都可以用
        import {ds} from "@/mixin";
        Vue.mixin(ds)
 3.代码：
	index.js:
        export const ds = {
          data(){
              return{
                  name:'lili'
              }
            },
            methods:{
            handleClick(){
              alert(this.name)
            }}}
    局部导入：
        <template>
          <div id="app">
            <h1>App</h1>
            <button @click="handleClick">提交</button>
          </div>
        </template>
        <script>
        import {ds} from "@/mixin"
        export default {
          name:'App',
          mixins:[ds,]
        }
        </script>
   全局导入：main.js中
		import {ds} from "@/mixin";
         Vue.mixin(ds)

插件

1.插件功能：用于增强Vue
2.本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
3.使用步骤：

  3.1 写一个 plugins/index.js
    import Vue from "vue";
    import axios from "axios";
    import {hunhe} from '@/mixin'
    export default {
        install(miVue) {
            console.log(miVue)
            1.vue 实例上放个变量
            Vue.prototype.$name = 'lqz'  // 类比python，在类上放了一个属性，所有对象都能取到
            Vue.prototype.$ajax = axios
		   2 使用插件，加入混入
            全局使用混入
            Vue.mixin(hunhe)
            3 定义全局组件
            4 定义自定义指令  v-lqz
            Vue.directive("fbind", {
                //指令与元素成功绑定时（一上来）
                bind(element, binding) {
                    element.value = binding.value;
                },
                //指令所在元素被插入页面时
                inserted(element, binding) {
                    element.focus();
                },
                //指令所在的模板被重新解析时
                update(element, binding) {
                    element.value = binding.value;
                },
            });
        }
    }
    3.2 在main.js 中使用插件
        import plugins from '@/plugins'
        Vue.use(plugins)  // 本子，使用use，会自动触发插件对象中得install
    3.3 之后在组件中可以直接用插件中写的数据

scoped样式

1.scoped样式:在styple上写

—只针对于当前组件生效

localStorage与sessionStorage

1.window 浏览器对象有的东西
2.浏览器中存储数据：
2.1 永久存储：localStorage 不登录加购物车，没登录 搜索过的商品
2.2 关闭页面数据就没了(临时存储)：sessionStorage
2.3 设定一个时间，到时候就过期：cookie
3.序列化和反序列化
3.1 对象转json字符串：JSON.stringify(对象)
3.2 json字符串转对象：JSON.parse(字符串)
4.代码：

<template>
  <div id="app">
    <h1>localStorage操作</h1>
    <button @click="saveStorage">向localStorage放数据</button>
    <button @click="getStorage">获取localStorage数据</button>
    <button @click="removeStorage">删除localStorage数据</button>

    <h1>sessionStorage操作</h1>
    <button @click="saveSessionStorage">向localStorage放数据</button>
    <button @click="getSessionStorage">获取localStorage数据</button>
    <button @click="removeSessionStorage">删除localStorage数据</button>

    <h1>cookie操作</h1>
    <button @click="saveCookie">向localStorage放数据</button>
    <button @click="getCookie">获取localStorage数据</button>
    <button @click="removeCookie">删除localStorage数据</button>
  </div>
</template>
<script>
import cookies from 'vue-cookies'
export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {
    saveStorage() {
      var person = {
        name: 'lili',
        age: 19
      }
      localStorage.setItem('userinfo', JSON.stringify(person))
    },
    getStorage() {
      let userinfo = localStorage.getItem('userinfo')
      console.log(userinfo)
      console.log(typeof userinfo)
    },
    removeStorage() {
      // localStorage.clear()
      localStorage.removeItem('userinfo')
    },

    saveSessionStorage() {
      var person = {
        name: 'lili',
        age: 19
      }
      sessionStorage.setItem('userinfo', JSON.stringify(person))
    },
    getSessionStorage() {
      let userinfo = sessionStorage.getItem('userinfo')
      console.log(userinfo)
      console.log(typeof userinfo)
    },
    removeSessionStorage() {
      // localStorage.clear()
      sessionStorage.removeItem('userinfo')
    },

    saveCookie() {
      cookies.set('name','lqz','7d')  // 按秒计
    },
    getCookie() {
      console.log(cookies.get('name'))
    },
    removeCookie() {

      cookies.remove('name')
    }
  }
}
</script>

<style scoped>
h1 {
  background-color: aqua;
}
</style>

集成elementui

1.第三方样式库：
1.1 饿了么团队：elementui
1.2 移动端的ui：vant
1.3 iview
2.使用步骤：
2.1 安装：npm i element-ui -S
2.2 在main.js中引入

原文地址：http://www.cnblogs.com/040714zq/p/16846061.html