一. 路径别名
二. 新建git项目
1. 新建git项目
image.png
image.png
把上面的地址复制下来,使用命令行命令把项目拉到本地
git clone https://github.com/zfdok/test.git
把工程拷贝进来
2. 查看git状态
git status
红色的就是没有提交的
3. 提交更改
git add .
git commit -m '初始化项目'
这个提交只是提交给本地git,还需要push到github
git push
4. 本地建好的工程push到github
现在github创建好一个空项目
image.png
然后到目标文件夹下执行:
git remote add origin https://github.com/zfdok/test02.git
然后:
git push -u origin master
可能会提示你输入用户名和密码
image.png
三. 创建一个vue项目的过程
1.使用git创建工程
参考第二节的内容
2.组织目录结构
image.png
3.引入初始CSS样式
我们需要对css样式进行初始化,保证各个浏览器表现统一.
src/assets/css文件夹需要两个文件
- base.css https://github.com/zfdok/vue_template/blob/master/src/assets/css/base.css
- normalize.css //这个是引用的时下流行的解决方案http://necolas.github.io/normalize.css/
在app.vue里
<style>
@import 'assets/css/base.css'
</style>
4. 定义路径别名
在工程根目录下,创建一个vue.config.js 写入如下内容:
module.exports = {
configureWebpack: {
resolve:{
extensions:[],
alias:{
'assets':'@/assets',
'common':'@/common',
'components':'@/components',
'network':'@/network',
'views':'@/views',
}
}
}
}
使用路径别名
如果在script区域,可以直接引用,如果在CSS 或src中引用 需要前面加~号
5. 添加网络请求
我们需要添加一个封装好的axios请求文件
https://github.com/zfdok/vue_template/blob/master/src/network/request.js
同时,为了防止页面对request过度依赖,我们可以设计一个中间件来过度请求
用home.js对Home组件的所有URL请求进行管理
import {request} from './request'
export function getHomeMultiData() {
return request({
url:'/test/getBanners'
});
}
export function getGoodsData(type, page) {
return request({
url:'/test/getGoods',
params:{
type,
page
}
});
}
在Home.vue中,我们可以调用这个函数:
created(){
getHomeMultiData().then(res => {
this.banners = res.data.banner.list;
this.recommends = res.data.recommend.list;
})
}
如上,我们调用了getHomeMultiData函数,并获取了异步结果:res,在.then中处理此结果给我们的Home组件的data
四. 使用基于vue的ui库
饿了么element
https://element.eleme.cn/#/zh-CN
京东nutui
http://nutui.jd.com/#/index
为移动而生的Vue JS 2组件框架
https://vuetifyjs.com/zh-Hans/
