前言
本文讲解的是vue2.0 webpack vuerouter vuex axios构建项目基础
步骤
1、全局安装webpack,命令
npm install webpack -g
注意，webpack升级到4舍弃了不少组件，之前有次使用淘宝镜像丢失了不少模块，所以webpack大家尽量使用npm装。
2、安装vue脚手架
npm install vue-cli -g
3、运行cmd（开始-运行-cmd-回车）
比如你的目录要安装在E盘，在命令面板中就输入"e:"然后回车
cd到项目的指定目录
4、根据模板创建项目,命令
vue init webpack-simple 工程名字<工程名字不能用中文> Project name 输入项目名称直接回车默认,其他的直接回车。
5、安装依赖
npm install
创建好的类目如下图所示
image.png
6、运行第一个vue项目,命令
npm run dev
image.png
运行完后会运行项目，并打开浏览器展示这个例子项目
7、安装vue-router,vuex,axios
axios相当于ajax，之前是用vue-resourse，不过现在这个模块不维护了，基本使用axios
vue-router是vue的路由
vuex是vue的状态管理,方便组件间通信
安装命令
npm install vue-router vuex axios --save-dev
会保存到package.json文件里，当代码上传别人下载后，可以使用npm install一次性把依赖全部装完
8、书写第一个组件
在src目录下新建一个component文件夹，新建组件文件firstcomponent.vue
firstcomponent.vue
<template> <div id="firstcomponent"> <h1>第一个组件</h1> <a href="javascript:void(0);">write by {{author}}</a> </div> </template> <!-- the js --> <script type="text/javascript"> export default{ data(){ return { author:‘yueziming‘ } } } </script> <!-- the vue style--> <style lang="scss"> </style> <style lang="scss">在里面可以直接写sass语法，书写更快捷
9、使用组件
app.vue部分代码
<template> <div id="app"> <img src="./assets/logo.png"> <h1>{{ msg }}</h1> <firstComponent></firstComponent> <!--使用组件--> <h2>Essential Links</h2> <ul> <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li> <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li> <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li> <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li> </ul> <h2>Ecosystem</h2> <ul> <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a>