vue学习之路（一）--vue-cli安装+vue-router+vue-resource

一、Vue-cli:脚手架安装

a) 安装nodejs；

b) win+r，输入cmd进入命令行工具；

c) 安装vue-cli：（-g：全局安装）

i. 方法一：npm install vue-cli -g：此方法链接的是国外网站会比较卡；

ii. 方法二：安装cnpm，通过淘宝镜像安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org，

然后：cnpm install vue-cli -g

d) Vue init webpack vueproject：
安装webpack模板，项目名称是vueproject

e) 弹出命令及选项：

	?Project name  （vueproject）   设置项目名称：默认vueproject
	?Project description(A vue.js project)  项目简介  
	?Author (******.com)      作者
	?Use Eslint to lint your code (Y/N)   是否使用eslint语法检测
	?Pick an Eslint preset   选择一个eslint配置
	?Setup unit tests with karma + Mocha?      设置单元测试
	?Setup e2e tests with Nightwatch?(y/n)      设置端到端测试

f) cd vueproject：进入vueproject项目文件夹

g) Npm install ：安装依赖项

h) Npm run dev ：运行

二、eslintrc语法检测配置说明

网址：中文官网：http://eslint.cn/docs/rules/

配置参数为0表示不去检测该项目

三、路径配置

路径配置别名方便我们在项目制作中简化代码。

build目录下：webpack.base.conf.js

找到：resolve 下面的 alias：

alias{

‘路径别名’: ’实际路径’

}

四、路由配置

安装路由：npm install vue-router

app.vue:

<template>
  <div id="app">
    <v-header></v-header>
    <div class="tab">
      <div class="tab-item"><router-linkto="/goods">商品</router-link></div>
      <div class="tab-item"><router-linkto="/ratings">评论</router-link></div>
      <div class="tab-item"><router-linkto="/seller">商家</router-link></div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
  importheaderfrom'./components/header/header.vue';

  export default{
    components: {
      'v-header': header
    }
  };
</script>

 

main.js

import  VueRouterfrom'vue-router';

import  goodsfrom'./components/goods/goods.vue';
import  sellerfrom'./components/seller/seller.vue';
import  ratingsfrom'components/ratings/ratings.vue';
Vue.config.productionTip = false;

/* eslint-disable no-new */

Vue.use(VueRouter);注册


const router =newVueRouter({
  routes:[
  { path:'/goods',component: goods },
  {path:'/seller',component: seller },
  {path:'/ratings',component: ratings }
]
});
router.push('/goods');    设置默认打开页面

new Vue({
  router,
  render: (h) => h(App)提供一个视图给 el 挂载
}).$mount('#app');

 

五、json数据引用

配置文件：dev-server.js  ----build目录下

const  express= require('express')  调用express框架
const  app =express()      实例化
var appData = require('../data.json');  调用data.json文件里面的数据
var seller = appData.seller;  data.json里面的数据分类
var apiRoutes =express.Router();

apiRoutes.get('/seller',function(req,res){  req：传入，res：传出
  res.json({
    errno:0,
    data:seller
  })
});
app.use('/api',apiRoutes)

浏览器查看对应数据：http://localhost:8080/api/seller

六、数据连接

a) 安装vue-resource：npm install vue-resource --save

b) main.js

import  VueResource  from  'vue-resource';
Vue.use(VueResource);

c) app.vue

<template>
<v-header:goods ="goods"></v-header>
</template>
<scripttype="text/ecmascript-6">
  import  headerfrom  'components/header/header.vue';
  const  ERR_OK =0;
  export default{
    data() {      这里的data必须为函数
      return{
        goods: {}  返回一个object数据到组件
      };
    },
    created() {   生命周期钩子实例化的时候产生
      this.$http.get('/api/goods').then((response) => {  成功的回调
        response = response.body;  获取goods数据
        if(response.errno=== ERR_OK) {
          this.goods= response.data;
        }
      },(response) => {});失败的回调
    },
    components: {
      'v-header': header
    }
  };
</script>

d) header.vue

<template>
  <div class="header">
    {{ goods }}
  </div>
</template>

<script type="text/ecmascript-6">
export default{
  props: {
    goods: {
      type: Object   定义接收的数据类型
    }
  }
};
</script>

请求api：

·  get(url, [options])

·  head(url, [options])

·  delete(url, [options])

·  jsonp(url, [options])

·  post(url, [body], [options])

·  put(url, [body], [options])

·  patch(url, [body], [options])

 

其他：

eslintrc.js：代码检测配置

package.json：项目信息及依赖添加位置--dependencies

dev-server: json数据连接

安装jQ依赖

npm install jquery --save-dev

 

安装css依赖

npm install style-loader --save-dev

npm install css-loader --save-dev

npm install file-loader --save-dev

 

安装less依赖

npm install less --save

npm install less-loader --save

配置less路径：

build -> webpack.base.conf.js里面的module的rules内添加

{
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
}

使用less：

<style lang="less">

</style>