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