VUE高级

作者: 殘缺的回忆 | 来源:发表于2019-06-13 16:18 被阅读0次

1.什么是vue-cli

vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

vue-cli是有Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板,是为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载,保存时 lint 校验,以及生产环境可用的构建版本。

2.安装

npm install -g @vue/cli

3.创建项目

vue create hello-world

vue ui

4.启动项目

npm run serve

npm run build

5.自定义脚手架

用户文件夹.vuerc

如何删除自定义脚手架

{
  "useTaobaoRegistry": false,
  "latestVersion": "3.8.3",
  "lastChecked": 1560396404707,
  "presets": {
      //此处删除
  }
}

6.添加插件的方式

vue add vuetify

7.全局环境变量

.env文件与.env.development文件

VUE_APP_XX=.......
export default{
        data:function(){
            return{
                base:process.env.VUE_APP_URL
            }
        }
    }

8.独立运行的VUE

vue serve name.vue

需要全局安装运行环境

npm i @vue/cli-server-global -g

9.配置vue.config.js

module.exports=

{

     baseUrl: //根路径

     outputDir: //输出路径

     assetsDir: //静态资源

     lintOnServer:false //是否开启eslint

    devSer:

    {

      open

      host

      port

      https 

      hotOnly

      proxy:{

      //跨域

          ‘/api’:{

           target:”http://api.localhost:80/api”

           ws:true,

           changeOrigin:true,

           pathRewrite:{

           ‘^/api’: ‘’

          }

      }

    }

  }

}

10.获取数据

devServer.before

      before(app){

         app.get(‘/api/goods’,(req,rep)=>{

       rep.json(data);

    })

}

相关文章

  • 最新web前端相关课程学习链接

    js基础篇 js进阶篇 js高级篇 vue基础篇 vue高级篇 react基础 react高级 Nodejs基础 ...

  • 前端系统学习 10. Vue高级用法

    Vue 高级用法 动画特效 transition 实现路由切换动画 App.vue Home -> List ->...

  • VUE高级

    1.什么是vue-cli vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻...

  • vue资源推荐

    vue资源推荐 写给初中级前端的高级进阶指南。写给初中级前端的高级进阶指南这篇文章不错 推荐给大家 vue技术揭秘...

  • vue 高级功能

    主要可以分为4part: 过渡 自定义指令 mixins 插件 过渡 transition 是vue提供的内置的组...

  • vue 组件高级

    组件的命名 在组件命名的时候如果是 kebab-case 使用的时候也应该是kebab-case

  • vue 高级技巧

    1.css 局部样式 vue 中style样式添加scoped属性表示它的样式只作用于当前组件,样式私有化。 但是...

  • Vue 高级-Vuex

    介绍 vuex是一种状态管理模式,它保存着组件的公用的状态,并且以相应的规则保证状态变化。 vuex的核心就是一个...

  • Vue 高级-mixin

    介绍 mixin 是一种能在不同组件里重用相同代码的方式。mixin 对象能够使用组件的任何属性(data,mou...

  • vue高级进阶

    Vuex 1.state的使用 首先在src文件夹下面建一个store文件夹作为仓库store里创建一些js文件作...

网友评论

      本文标题:VUE高级

      本文链接:https://www.haomeiwen.com/subject/humsfctx.html