web-vue项目搭建

进到目录
执行 vue init webpack-simple vue-demo02   demo02是名字可以自己起

创建好项目之后
执行cnpm install    下载项目相关的包

下载之后
执行npm run dev 启动项目

请求数据
执行cnpm install vue-resource --save
package.json文件的dependencies中出现vue-resource引入成功

成功之后
再main.js文件中引入 import VueResource from 'vue-resource'

引入之后再下一行调用
Vue.use(VueResource)

之后即可使用
  var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
      this.$http.get(api).then((response)=>{
        console.log(response)
        this.list = response.body.result
      },function(){
        console.log(eer)
      })
    }

请求数据Axios
执行cnpm install axios --save

成功之后哪里用哪里引用
import Axios from 'axois'

之后即可使用
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
      Axios.get(api).then((response)=>{
        console.log(response)
        this.list = response.data.result//请求到的数据放到list里面
      }).catch(()=>{
        console.log(eer)
      })

路由vue-router使用
执行cnpm install vue-router --save

成功之后
再main.js引入import VueRouter from 'vue-router'

引入之后再下一行调用
Vue.use(VueRouter)

引入之后 
创建自建 引入组件

定义路由
const routes = [
{path: '/(组件名字)',component:(文件名字)},
{path: '/home',component:Home},
  {path: '/content/:aid',component:Content},//传值跳转
{path: '*',redirect: '/home'} //路由默认跳转的地址
]

实例化VueRouter
const router = new VueRouter({
routes 
})

再main.js挂载
把router放到 new Vue 中
new Vue({
el:'#app',
router,
render:h => h(app)
})

把<router-view></router-view>放到跟组件 App.vue中

跳转
<router-link to="/home">go to Home</router-link>
<router-link to="/smzq">go to Smzq</router-link>

Mint ui使用
执行cnpm install mint-ui --save

安装成功之后
再main.js中引入
import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(Mint)
即可使用

ElementUi使用
执行cnpm install element-ui --save

安装成功之后再main.js中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

之后需要配置webpack（模块化打包管理工具 可以把浏览器无法解析的文件，打包成浏览器可以解析的js）
在webpack.config.js文件的rules里写入
{
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
},
之后需要重新运行项目即可使用