Vue项目开发介绍

2022-11-04 19:31 406人阅读评论(0)

Vue项目目录介绍

node_modules：内部有很多当前项目依赖的模块

public：存放页面图标和不支持 JavaScript 情况时的页面

favicon.ico：网站小图标

index.html：spa单页面应用

src：存放 vue 项目的源代码

assets：静态资源，js、css，图片

components：小组件，用在别的页面大组件中

HelloWorld.vue：默认了一个hello world组件

router：装了vue-router自动生成的，如果不装就没有

                - index.js：vue-router的配置

store：装了vuex自动生成的，如果不装就没有

                - index.js ：vuex的配置

views：放了一堆组件，页面组件

- AboutView.vue：关于页面组件

- HomeView.vue：主页页面组件

         App.vue：根组件

         main.js：整个项目启动入口

.gitignore：git的忽略文件

babel.config.js：babel的配置文件

package.json：存放项目的依赖配置(比如vuex，element-UI)

package-lock.json：锁定文件package.json中写了依赖的版本，这个文件锁定所有版本

README.md：项目的介绍文件

vue.config.js：vue项目的配置文件

Vue项目开发规范

   
    
     
      
     
     
      
       <template>html内容写在里面
       </template>
      
     
    
     
      
     
     
      
       <script>写js内容
       </script>
      
     
    
     
      
     
     
      
       <style>
       写css样式<style>
      
     
   
1.把App.vue根组件导入

2.使用new Vue({render: h => h(App)}).$mount('#app') 把App.vue组件中得数据和模板，插入到了index.html的id为app div中了

3.以后，只要在每个组件的export default{}写之前学过的所有js的东西

4.以后，只要在每个组件的template，写模版，插值语法，指定等

5.以后，只要在每个组件等style，写样式

es6导入导出语法

默认导出与导入

- 默认导出：关键字export defalut


   
    
     
      
     
     
      
       export defalut {
      
     
    
     
      
     
     
          
       name:
       'abc',
      
     
    
     
      
     
     
      
           printName () {
      
     
    
     
      
     
     
              
       console.
       log(
       this.
       name)
      
     
    
     
      
     
     
      
           }
      
     
    
     
      
     
     
      
       }

- 命名导入：要起一个名字

import 命名 from '路径'

命名导出与导入

- 写一个js，在js中定义变量，函数，最后使用export导出


   
    
     
      
     
     
      
       export conse name = 
       'abc'
      
     
    
     
      
     
     
      
       export 
       const 
       printname = (
       ) => {
      
     
    
     
      
     
     
          
       console.
       log(
       'cba')
      
     
    
     
      
     
     
      
       }

- 在想使用的js中导入

import {printname} from '路径'

ps：可以在包下面建立index.js的文件，以后导入的时候就会默认找它，类似python中的__init__.py。

Vue项目集成axios

第一步：安装axios

cnpm install axios --S

第二步：导入使用

import axios from 'axios'

第三步：利用axios向后端获取数据


   
    
     
      
     
     
      
       axios.
       get(
       'http://127.0.0.1:800/user/').
       then(
       res => {
      
     
    
     
      
     
     
          
       console.
       log(res.
       data)
      
     
    
     
      
     
     
          
       this.
       userList=res.
       data
      
     
    
     
      
     
     
      
       })

第四步：需要解决跨域问题(django)

- 安装：pip3 install django-cors-headers

- app中注册：


   
    
     
      
     
     
      
       INSTALLED_APPS = (
      
     
    
     
      
     
     
           
       'corsheaders',
      
     
    
     
      
     
     
      
       )

- 中间件注册：


   
    
     
      
     
     
      
       MIDDLEWARE = [
      
     
    
     
      
     
     
          
       'corsheaders.middleware.CorsMiddleware',
      
     
    
     
      
     
     
      
       ]

- 在配置文件中加下面代码：


   
    
     
      
     
     
      
       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',
      
     
    
     
      
     
     
      
               )

props配置项

props的作用是用来接收父组件中传过来的数据

子组件使用props配置项进行属性的接收的形式有三种：


   
    
     
      
     
     
      
       // 1.普通用法只接收数据
      
     
    
     
      
     
     
      
       props:[
       'name']
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       // 2.接受数据的属性认证
      
     
    
     
      
     
     
      
       props:{
      
     
    
     
      
     
     
          
       name:
       String
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       // 3.限制类型、必要性、指定默认值
      
     
    
     
      
     
     
      
       props:{
      
     
    
     
      
     
     
          
       name:{
      
     
    
     
      
     
     
              
       type:
       String, 
       // 类型
      
     
    
     
      
     
     
              
       required:
       true, 
       // 必要性
      
     
    
     
      
     
     
              
       default:
       '隔壁老王', 
       // 默认值
      
     
    
     
      
     
     
      
           }
      
     
    
     
      
     
     
      
       }

混入与插件、scoped样式

混入用法

混入提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项，当组件使用混入对象时所有混入对象的选项将被混合进入该组件本身的选项


   
    
     
      
     
     
      
       // 定义一个混入
      
     
    
     
      
     
     
      
       export 
       const hunru = {
      
     
    
     
      
     
     
          
       data(
       ) {
      
     
    
     
      
     
     
          
       return {
      
     
    
     
      
     
     
              
       name:
       'abc'
      
     
    
     
      
     
     
      
           }
      
     
    
     
      
     
     
      
       },
      
     
    
     
      
     
     
          
       methods:{
      
     
    
     
      
     
     
              
       handlePrintName(
       ) {
      
     
    
     
      
     
     
                  
       alert(
       this.
       name)
      
     
    
     
      
     
     
      
               }
      
     
    
     
      
     
     
      
           },
      
     
    
     
      
     
     
      
       }

- 在局部组件中使用


   
    
     
      
     
     
      
       import {hunru} 
       from 
       "@/mixin";
      
     
    
     
      
     
     
      
       mixins:[hunru,]

- 全局使用，在main.js中导入以后所有组件都可以用


   
    
     
      
     
     
      
       import {hunru} 
       from 
       "@/mixin";
      
     
    
     
      
     
     
      
       Vue.
       mixin(hunru)

插件的使用

插件通常用来Vue添加全局功能，用来增强Vue。插件的本质包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据


   
    
     
      
     
     
      
       import 
       Vue 
       from 
       "vue";
      
     
    
     
      
     
     
          
       import axios 
       from 
       "axios";
      
     
    
     
      
     
     
          
       import {hunru} 
       from 
       '@/mixin'
      
     
    
     
      
     
     
          
       export 
       default {
      
     
    
     
      
     
     
              
       install(
       miVue) {
      
     
    
     
      
     
     
                  
       // console.log(miVue)
      
     
    
     
      
     
     
                  
       // 1 vue 实例上放个变量
      
     
    
     
      
     
     
                  
       Vue.
       prototype.
       $name = 
       'abc'  
       // 类比python，在类上放了一个属性，所有对象都能取到
      
     
    
     
      
     
     
                  
       Vue.
       prototype.
       $ajax = axios
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
                  
       // 2 使用插件，加入混入
      
     
    
     
      
     
     
                  
       // 全局使用混入
      
     
    
     
      
     
     
                  
       Vue.
       mixin(hunru)
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
                  
       // 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;
      
     
    
     
      
     
     
      
                       },
      
     
    
     
      
     
     
      
                   });
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
               }
      
     
    
     
      
     
     
      
           }

- 在main.js中使用插件，以后在组件中可以直接用插件中写的东西


   
    
     
      
     
     
      
       import plugins 
       from 
       '@/plugins'
      
     
    
     
      
     
     
      
       Vue.
       use(plugins) 
       // 本质：使用use会自动触发插件对象中得install

scoped样式

scoped可以达到类组件私有化，在styple上写以后只针对与当前组件生效

<style scoped> </style>

localStorage和sessionStorage

当我们需要在浏览器中存储数据的时候就需要用到localStorage、sessionStorage和cookie三种形式存储每一种方式的功能都不一样

localStorage：永久存储，浏览器关闭也依然存在


   
    
     
      
     
     
      
       <template>
      
     
    
     
      
     
     
        
       <div id="app">
      
     
    
     
      
     
     
          
       <h1>localStorage操作
       </h1>
      
     
    
     
      
     
     
          
       <button @click="saveStorage">点我向localStorage放数据
       </button>
      
     
    
     
      
     
     
          
       <button @click="getStorage">点我获取localStorage数据
       </button>
      
     
    
     
      
     
     
          
       <button @click="removeStorage">点我删除localStorage放数据
       </button>
      
     
    
     
      
     
     
      
       <script>
       
      
     
    
     
      
     
     
      
       export 
       default {
      
     
    
     
      
     
     
        
       name: 
       'App',
      
     
    
     
      
     
     
        
       data(
       ) {
      
     
    
     
      
     
     
          
       return {}
      
     
    
     
      
     
     
      
         },
      
     
    
     
      
     
     
        
       methods: {
      
     
    
     
      
     
     
          
       saveStorage(
       ) {
      
     
    
     
      
     
     
            
       var person = {
      
     
    
     
      
     
     
              
       cook: 
       100,
      
     
    
     
      
     
     
              
       msg: 
       '完美'
      
     
    
     
      
     
     
      
             }
      
     
    
     
      
     
     
            
       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')
      
     
    
     
      
     
     
      
           },
      
     
    
     
      
     
     
      
       </script>

sessionStorage：临时存储，关闭页面数据就没有了


   
    
     
      
     
     
      
       <template>
      
     
    
     
      
     
     
        
       <div id="app">
      
     
    
     
      
     
     
          
       <h1>sessionStorage操作
       </h1>
      
     
    
     
      
     
     
          
       <button @click="saveSessionStorage">点我向localStorage放数据
       </button>
      
     
    
     
      
     
     
          
       <button @click="getSessionStorage">点我获取localStorage数据
       </button>
      
     
    
     
      
     
     
          
       <button @click="removeSessionStorage">点我删除localStorage放数据
       </button>
      
     
    
     
      
     
     
        
       </div>
      
     
    
     
      
     
     
      
       </template>
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       <script>
      
     
    
     
      
     
     
      
       export 
       default {
      
     
    
     
      
     
     
        
       name: 
       'App',
      
     
    
     
      
     
     
        
       data(
       ) {
      
     
    
     
      
     
     
          
       return {}
      
     
    
     
      
     
     
      
         },
      
     
    
     
      
     
     
        
       methods: {
      
     
    
     
      
     
     
          
       saveSessionStorage(
       ) {
      
     
    
     
      
     
     
            
       var person = {
      
     
    
     
      
     
     
              
       name: 
       'abc',
      
     
    
     
      
     
     
              
       age: 
       18
      
     
    
     
      
     
     
      
             }
      
     
    
     
      
     
     
      
           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')
      
     
    
     
      
     
     
      
           },
      
     
    
     
      
     
     
      
       </script>

cookie：设置时间，到期就过期


   
    
     
      
     
     
      
       <template>
      
     
    
     
      
     
     
        
       <div id="app">
      
     
    
     
      
     
     
          
       <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: {
      
     
    
     
      
     
     
          
       saveCookie(
       ) {
      
     
    
     
      
     
     
      
             cookies.
       set(
       'name',
       'abc',
       '7d')  
       // d:按照天数计时
      
     
    
     
      
     
     
      
           },
      
     
    
     
      
     
     
          
       getCookie(
       ) {
      
     
    
     
      
     
     
            
       console.
       log(cookies.
       get(
       'name'))
      
     
    
     
      
     
     
      
           },
      
     
    
     
      
     
     
          
       removeCookie(
       ) {
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
             cookies.
       remove(
       'name')
      
     
    
     
      
     
     
      
           }
      
     
    
     
      
     
     
      
       </script>

集成elementui

常用的第三方样式库

- iview

- 移动端Ui：vant

- 饿了么团队：elementui

elementui使用步骤

- 安装：npm i element-ui -S

- 引入样式


   
    
     
      
     
     
      
       <!-- 引入样式 -->
      
     
    
     
      
     
     
      
       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      
     
    
     
      
     
     
      
       <!-- 引入组件库 -->
      
     
    
     
      
     
     
      
       <script src="https://unpkg.com/element-ui/lib/index.js">
       </script>

- 通过npm安装的则需要在main.js中写上下面代码


   
    
     
      
     
     
      
       import 
       Vue 
       from 
       'vue';
      
     
    
     
      
     
     
      
       import 
       ElementUI 
       from 
       'element-ui';
      
     
    
     
      
     
     
      
       import 
       'element-ui/lib/theme-chalk/index.css';
      
     
    
     
      
     
     
      
       import 
       App 
       from 
       './App.vue';
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       Vue.
       use(
       ElementUI);
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       new 
       Vue({
      
     
    
     
      
     
     
        
       el: 
       '#app',
      
     
    
     
      
     
     
        
       render: 
       h => 
       h(
       App)
      
     
    
     
      
     
     
      
       });

转载：https://blog.csdn.net/weixin_52596593/article/details/127618561

查看评论

飞道的博客

飞道的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章