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);
});
}
}
};