搭建vue-cli

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 依赖包