1.使用vue-cli搭建项目并删除无关代码

首先要安装vue-cli npm install @vue/cli -g

创建前端项目（我这里的项目名就叫vision） vue create vision

在创建过程中配置一下

npm run serve将项目跑起来，在浏览器地址栏中输入 http://localhost:8080/即可访问

2.静态资源的引入

将下载好的静态资源放到当前vision项目下面的public目录

static静态文件下载

3.项目的基本配置

在当前项目下面新建vue.config.js文件

项目在初始化的时候默认会指定一个端口，我这里默认指定的是8080，见上图

这里，可以自己指定端口

vue.config.js

module.exports = {devServer: {port: 8083, //端口号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.echartsVue.config.productionTip = falsenew 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.echartsVue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')

前端项目的创建和准备相关推荐

【高校宿舍管理系统】第四章创建前端项目以及完成登录页面
第四章创建前端项目以及完成登录页面提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第四章创建前端项目以及完成登录页面前言 ...
【我的前端】前端项目小练习：CSS创建3D圆柱旋转效果
前端项目小练习:CSS创建3D圆柱旋转效果文章目录前端项目小练习:CSS创建3D圆柱旋转效果 HTML标记样式化 CSS 3D 圆柱体动画圆柱体
基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
5.大型电商项目之创建前端展示模板并调用
1. templates前端模板的使用 1.1 templates前端模板的创建首先,我们页面很多地方是相似的,这里就创建一个基础模板,不同的地方,对模板内容的block进行修改即可:对于相同的地方 ...
多个前端项目放在一个git好还是_前端工作流
没有规矩不成方圆,如果一个项目只有你一个人在维护,那么你不需要担心很多问题,因为你对它心知肚明,但同时一个人的力量无法支撑起来大型项目.更多时候,我们需要与其他人合作,共同把项目推进,这意味着我们需要 ...
从一个前端项目实践 Git flow 的流程与参考
Git flow 出自 A successful Git branching model,这里使用了一个前端项目配合本文稿实施了 git flow 并记录流程作出示例和参考,对 hotfix 与持续部 ...
More than React（一）为什么ReactJS不适合复杂交互的前端项目？
<More than React>系列的文章会一共分为五篇和一则附录.本文是第一篇,介绍用 ReactJS开发时遇到的种种问题.后面四篇文章的每一篇将会分别详细讨论其中一个问题,以及Bin ...
用gulp构建你的前端项目
前言前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...
node.js require 自动执行脚本并生成html,利用node.js实现自动生成前端项目组件的方法详解...
本文主要给大家介绍了关于利用node.js实现自动生成前端项目组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 脚本编写背景写这个小脚本的初衷是,项目本身添加一个组件太 ...

前端项目的创建和准备