依赖环境

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是不错的选择

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

VUE-项目搭建+element+axios

依赖环境

初始项目搭建

安装element

安装axios

猜你喜欢