vue-cli 3.0 學習筆記

-------------------------------------------

項目搭建及結構

安裝

npm install -g @vue/cli

添加項目

vue create my-project

啟動：npm run server

打包：npm run build

-------------------------------------------

Vue-Cli3.0-自定義腳手架模板

 

-------------------------------------------

Vue-Cli3.0-新出的添加插件方法

npm install axios
vue add vuetify

兩個都可以 后面那個會影響展示
-------------------------------------------

Vue-Cli3.0-全局環境變量的使用

 

更目錄加：.env

內容：env_VUE_APP_url=http://api.dev.com

env_VUE_APP 這段是固定的

獲取

data(){
return{
url:process.env.VUE_app__url
}
}

調用：{{url}}}

.env.development 開發環境

.env.prodoction 生產環境

-------------------------------------------

Vue-Cli3.0-獨立運行.vue文件

vue serve 項目名字/demo.vue

可能會提示報錯，安裝個東西就好了，報錯會提示

-------------------------------------------

項目根目錄：vue ui

可以在網頁操作圖形化添加和啟動項目

-------------------------------------------

Vue-Cli3.0-配置基礎的路徑

vue.config.js

module.exports = {
baseUrl:"/",//根目錄
outputDir:"dist",//構建輸入目錄
assetssDir:"assets",//靜態資源目錄（js,css,img,fonts）
lintOnSave:false,//是否開啟eslint保存檢測
}

 

-------------------------------------------

 

Vue-Cli3.0-配置跨域請求

module.exports = {
baseUrl:"/",//根目錄
outputDir:"dist",//構建輸入目錄
assetssDir:"assets",//靜態資源目錄（js,css,img,fonts）
lintOnSave:false,//是否開啟eslint保存檢測
devServer:{
open:false,//自動彈出頁面
host:"127.0.0.1",//0.0.0.0
port:8081,//端口號
https:false,
hosOnly:false,//熱更新
proxy:{
//配置跨域
‘api’:{
target：'http///localhost:5000/api',
ws:true,
changOrigin:true,
pathRewrite:{
'^/api':''
}
}
}
}
};

-------------------------------------------

Vue-Cli3.0-加載美團外賣數據json

 

const goods = require('./data/goods.json');
const ratings = require('./data/ratings.json');
const seller = require('./data/seller.json');

module.exports = {
baseUrl: '/', // 根路徑
outputDir: 'dist2', // 構建輸出目錄
assetsDir: 'assets', // 靜態資源目錄(js,css,img,fonts)
lintOnSave: false, // 是否開啟eslint保存檢測, 有效值: true || false || 'error'
devServer: {
open: true,
host: 'localhost',
port: 8081,
https: false,
hotOnly: false,
proxy: {
// 配置跨域
'/api': {
target: 'http//localhost:5000/api/',
ws: true,
changOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
before(app) {
// http://localhost:8081/api/goods
app.get('/api/goods', (req, res) => {
res.json(goods);
});

app.get('/api/ratings', (req, res) => {
res.json(ratings);
});

app.get('/api/seller', (req, res) => {
res.json(seller);
});
}
}
};