前端项目的创建和准备
Posted So istes immer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端项目的创建和准备相关的知识，希望对你有一定的参考价值。
1.使用vue-cli搭建项目并删除无关代码
首先要安装vue-cli npm install @vue/cli -g
创建前端项目（我这里的项目名就叫vision） vue create vision
在创建过程中配置一下
npm run serve将项目跑起来，在浏览器地址栏中输入 http://localhost:8080/即可访问
2.静态资源的引入
将下载好的静态资源放到当前vision项目下面的public目录
3.项目的基本配置
在当前项目下面新建vue.config.js文件
项目在初始化的时候默认会指定一个端口，我这里默认指定的是8080，见上图
这里，可以自己指定端口
vue.config.js
module.exports = {
devServer: {
port: 8081, //端口号
open: true //npm run serve之后自动打开浏览器
}
}4.全局echarts对象的挂载
public/index.html
加一行<script src="static/lib/echarts.min.js"></script>
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without javascript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 一旦通过script标签引入echarts.js文件之后，就可用window.echarts来全局获取echarts对象 -->
<script src="static/lib/echarts.min.js"></script>
</body>
</html>
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 将全局的echarts对象挂载到Vue的原型对象上
// 别的组件可用this.$echarts来获取echarts对象
Vue.prototype.$echarts = window.echarts
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
5.axios的封装和挂载
安装axios npm install axios
挂载
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
// 请求基准路径的配置
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/'
// 将axios挂载到Vue的原型对象上，在别的组件中就可以通过this.$http获取axios对象
Vue.prototype.$http = axios
// 将全局的echarts对象挂载到Vue的原型对象上
// 别的组件可用this.$echarts来获取echarts对象
Vue.prototype.$echarts = window.echarts
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
以上是关于前端项目的创建和准备的主要内容，如果未能解决你的问题，请参考以下文章