搭建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的使用

CSS

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=。。。。

React JSX

<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

CSS

vue serve name.vue

需要全局安装运行环境

CSS

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

9．图形构建项目

10．配置vue.config.js

Java

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’: ‘’          }       }     }   }}