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