VUE-CLI 脚手架

1.什么是vue-cli

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

vue-cli是有Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板,是为现代前端工作流提供了 batteries-included

 
image.png

的构建设置。只需要几分钟的时间就可以运行起来并带有热重载,保存时 lint 校验,以及生产环境可用的构建版本。

2.安装

vue-cli3.0-beta vue脚手架3.0的使用

npm install -g @vue/cli
 
image.png

3.创建项目

vue create hello-world
 
image.png
vue ui
 
image.png

4.启动项目

npm run serve

npm run build

5.自定义脚手架

用户文件夹.vuerc

如何删除自定义脚手架

 
image.png

6.添加插件的方式

【非专业前端】Vue UI 之 建立Vuetify工程

vue add vuetify

7.全局环境变量

.env文件与.env.development文件

VUE_APP_XX=。。。。
<template>
  <div>
      {{ base }}
  </div>
</template>

<script>
  export default {
    data(){
        return{
            base:process.env.VUE_APP_BASE
        }
    },
    name:'Nav',
    components: {

    },
    props:[]
  }
</script>

<style lang="less">

</style>


// App.vue
<template>
  <v-app>
    <Nav/>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import Nav from './components/Nav'

export default {
  name: 'App',
  components: {
    HelloWorld,Nav
  },
  data () {
    return {
      //
    }
  }
}
</script>

8.独立运行的VUE

vue serve name.vue

需要全局安装运行环境

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

9.图形构建项目

10.配置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’: ‘’
          }
       }
     }
   }
}

11.获取数据

before(app){
    app.get(‘/api/goods’,(req,rep)=>{
    rep.json(data);
    })
}

12.文件配置

 

总结下来其实只有四步

npm install --global vue-cli 下载vue-cli脚手架
vue init webpack test 生成项目,形成基本结构
npm install 依赖包

 
12-30 07:38