VUE高级

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);

    })

}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容