一、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>