1.搭建项目前的准备
安装node.js（什么是node.js?），直接在官网上下载即可，现在node.js都包括了npm(什么是npm?)，不用在单独下载，而且最新版的环境变量也不用自己配置了 网址: 下载成功后使用命令 node -v 和 npm -v看版本号
安装淘宝镜像
npm install -g cnpm --registry= // 注册淘宝镜像 npm替换成cnpm使用即可
安装webpack (什么是webpack？)
npm/cnpm install webpack -g 有些依赖用淘宝镜像下载会快一些
2.使用脚手架搭建项目
npm install -g vue-cli // 全局安装脚手架vue init webpack 项目名 // 生成项目cd 项目名 // 进入项目npm/cnpm install // 下载项目依赖 开发依赖和项目依赖的区别npm run dev // 运行项目npm run build // 打包项目 项目结构仔细分析复制代码
3.如何引用插件
引用element-ui
下载所需的依赖
cnpm install style-loader -Dcnpm install css-loader -Dcnpm install file-loader -D复制代码
下载element-ui
npm install element-ui --save复制代码
修改webpack.base.conf.js 的配置
{ test: /\\\\\\\\.css$/, loader: "style!css" }, { test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/, loader: "file" } 复制代码 4.在最外层的main.js 引用
import Elementui from 'element-ui' // 引入element-uiimport'element-ui/lib/theme-default/index.css' // 引入cssVue.use(ElementUI) // 挂载elementUI复制代码
5.在组件内直接调用
其余插件也和这个引用差不多
比较常用的插件:
- 轮播 swiper vue-awesome-swiper
- table elementui里面有表格，如果满足不了需求可以使用 vue table
- 图表 echart 以后还有再补充
6.项目中必须要有的
- ajax 用的是官方提供的
- vuex 官方提供的状态管理工具
7.如何使用自己封装的方法
在外面公共文件夹里面建立until.js 文件里面写好自己封装的方法
在最外面的main.js中引入，
import utils from './utils' // 在utils 里面把所有方法return出来 复制代码
扩展到vue的原型上面去
Vue.prototype = Object.assign(Vue.prototype, utils())复制代码