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

    })

}