vue-cli 初体验
vue-cli 初体验: 全局安装cli
npm install -g @vue/cli
查看版本
vue --version
升级
npm update -g @vue/cli
创建项目
vue create test
空格选中
选择Y,
选择Sass/SCSS with dart-sass
选择 ESLint + Standard config
选中Lint on saave与 Lint and fix on commit (这个有点烦,格式稍微有点问题就报错,安装完成后可以在.eslintrc.js修改配置)
选择 In dedicated config files
选择N
运行
npm run serve
打包npm run build
demo
设置全局共享数据
创建两个子组件
App.vue组件配置
<template>
<div id="app">
<!-- <p>{{msg}}</p>
<button @click="say">按钮</button>
<button @click="getName">获取共享数据</button> -->
<!-- 子组件 -->
<!-- <login-sub></login-sub>
<hello-world></hello-world> -->
//路由跳转
<router-link to="/Login">Go to Login</router-link>
<br>
<router-link to="/HelloWorld">Go to HelloWorld</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
// import LoginSub from './components/LoginSub.vue'
export default{
name:'App',
data:function(){
return {
msg:'999',
str:'hello world'
}
},methods:{
say(){
console.log('say');
},
getName(){
console.log(this.$store.state.name);
}
},
components:{
// LoginSub:LoginSub,
// HelloWorld:HelloWorld
}
}
</script>
<style scoped>
p{
background: firebrick;
}
</style>
路由设置
修改webpack配置
创建vue.coonfig.js
使用element UI
安装 npm i element-ui -S
chrome 添加vue 插件 链接
安装axios进行http请求
npm install axios -S
全局注册,在main.js中 引入 import axios from 'axios' ,
完整main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store/index.js'
import axios from 'axios'
import storage from 'good-storage'//缓存
//请求前拦截
axios.interceptors.request.use((config) => {
console.log(storage.get('Authorization'))
if(config.method=='post'&&storage.get('Authorization')){
config.headers.Authorization='Bearer '+storage.get('Authorization');
}
console.info(config,'请求前拦截');
return config;
});
Vue.prototype.$axios=axios;
//请求后拦截
axios.defaults.crossDomain = true;
axios.interceptors.response.use((response) => {
console.log(response,'请求后拦截,正常');
return response;
}, function (error) {
if(error.response.data.code==409){
alert(error.response.data.msg);
}
console.log(error,'请求后拦截,异常',error,error.response.data);
return error;
});
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// 导入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 在项目中使用elementui
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
完整vue.config.js
const { dir } = require('console');
const path=require('path');
const webpack = require('webpack');
module.exports={
outputDir:'bundle',//打包目录
configureWebpack:{
plugins:[
new webpack.BannerPlugin({//版权信息
banner:'中国好码农-blogs.chencong.fun'
})
]
},
devServer:{//跨域代理设置
open:true,
host:'localhost',
proxy:{
'/api':{//匹配api
target:'https://fission.chencong.fun',
changeOrigin:true,
pathRewrite:{
'^/api':''//替换api
}
}
}
}
}
猜你喜欢
第一个go网站
阅读 392使用go gin 搭建一个网站
在 Laravel 中集成 Swoole 实现 WebSocket 服务器
阅读 1045基于 LaravelS 扩展包把 Swoole 集成到 Laravel 项目来实现 WebSocket 服务器,以便与客户端进行 WebSocket 通信从而实现广播功能。
黑客、后门
阅读 1334留下的网站后门,可以作什么?
Laravel队列的实现
阅读 1086Laravel 队列的简单使用例子
kafka初体验
阅读 701使用kafka需要安装Java环境,安装zookeeper,安装kafa
PHP定时任务
阅读 514PHP框架Laravel定时任务的实现
企业微信会话存档安装Wxwork_finance_sdk扩展 WeWorkFinanceSdk_C.h
阅读 653企业需要使用会话内容存档应用secret所获取的accesstoken来调用
php 的swoole 和websocket 连接wss
阅读 751wss的设置