版权声明:本文为博主精心打造,转载请标明出处。>_< https://blog.csdn.net/slyslyme/article/details/86530188
依赖环境
1. node: 访问node官网下载并安装
2. vue-cli: npm install -g vue-cli (全局进行安装)
淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org
初始项目搭建
vue-cli创建vue项目
vue init webpack [项目名]
在后序的安装中会询问是否安装test(启动单元测试) e2e(启动端到端测试) 以及 eslint(代码检测,比如tab或者空格混用会报错)可以自行选择
接下来就可以得到一个设定项目名的vue项目名,进入此项目 :
cd 项目名
npm install //安装依赖,生成node_modules,或者cnpm install
npm run dev //运行项目,打开连接 localhost:8080即可看到VUE的HelloWorld界面,则项目构建成功
在实际开发过程中,项目依赖文件时常报错,可以删除node_modules然后重新运行 npm run dev(或者 cnpm run dev)重新安装,大部分问题都可以通过这种方式解决
项目目录结构:
vue-llplatform
|— build // 构建脚本
|— config // 构建环境变量配置
|— node_modules // npm依赖包
|— src // 项目代码
| |— api // 后台请求接口
| |— assets // 资源文件
| | |— css
| | |— js
| | └─ img
| |— components // 自定义vue组件
| |— mock // 模拟后台数据,可安装mock.js
| |— pages // 页面
| |— router // 路由规则
| |— utils // 公共工具
| |— App.vue
| └─ main.js
|— static
|— test // 项目测试相关
|— .babelrc
|— .editorconfig
|— .eslintignore
|— .eslintrc.js
|— .gitignore
|— .postcssrc.js
|— index.html // 首页入口
|— package.json // webpack配置
└─ README.md
安装element
可配合vue项目使用的组件库有许多,element是不错的选择
扫描二维码关注公众号,回复:
4972928 查看本文章
1. 命令安装
npm install element-ui -S
2. 安装完成后还需进行配置:
修改src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui' //element
import '../node_modules/element-ui/lib/theme-chalk/index.css' //element
import axios from 'axios' //axios
import qs from 'qs' //axios自带
import VueScroll from 'vuescroll' //虚拟滚动条
import 'vuescroll/dist/vuescroll.css'
import VueParticles from 'vue-particles' //粒子特效动画 安装npm install vue-particles --save-dev
import echarts from 'echarts' //百度echarts插件
Vue.config.productionTip = false
Vue.use(VueParticles) //粒子动画
Vue.use(ElementUI) //element
Vue.use(echarts) //echarts
Vue.use(VueScroll, {ops: {bar: {background: '#C0C4CC'}}})
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.baseURL = 'http://127.0.0.1:8081/'
axios.defaults.withCredentials = true
Vue.prototype.$http = axios
Vue.prototype.$axios = axios
Vue.prototype.$qs = qs
Vue.prototype.$echarts = echarts
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
axios,
components: { App },
template: '<App/>'
})
安装axios
npm install axios -S