【无标题】项目的搭建

一、Vue项目创建

1、安装node.js环境（node -v 验证）
A -> B C -> D -> E 依赖的层级关系

2、安装vue脚手架（@vue/cli)
脚手架是一个第三方库，需先安装才能使用
-g 表示全局安装 global

3、使用脚手架来创建项目
warn warning 警告,可不处理
error 红色报错,是失败，一定要处理

4、vue.config.js 配置文件
让我们的vue项目更加灵活、满足个性化的开发需求

5、npm的使用（用于安装第三方模块）
(c)npm install xxx -S 把包记录在dependencies这里
(c)npm install yyy -D 把包记录在devDependencies这里
(c)npm install 会根据根目录中的package.json文件中记录的第三方包来进行安装。
(c)npm install zzz -g 全局安装永久可用

6、cnpm的使用
# 把国外的服务器，切换至淘宝镜像源。 # 使用cnpm安装第三方模块，网速会更快。 npm install -g cnpm --registry=https://registry.npm.taobao.org
7、ESLint
作用：用于规范代码风格
如果你的代码不满足规范，就会出现警告或报错。

8、devtools安装
git clone GitHub - arcliang/Vue-Devtools-: 已用npm处理过，已配置过源码文件，直接拿来用即可
打开谷歌浏览器：设置-扩展程序-加载已解压的扩展包
重启一下浏览器

9、webpack
本地服务器，指向 public 目录
热更新：webpack实时监测代码的变化，并实时编译，页面自动更新
当npm start启动了本地服务后，webpack就会动态地把入口文件main.js编译压缩插入到index.html文件中去。

二、路由vue-router

1、单页面应用程序（SPA）
一切皆组件
vue-router让SPA开发更简单

2、路由(vue-router)安装与基础使用
安装 cnpm install vue-router -S
在src/router.js文件，注册路由、创建路由实例并抛出
在入口文件main.js中引入路由实例并挂载
在App.js组件中，使用内置组件<router-view></router-view>容器来放置匹配成功的组件
使用<router-link></router-link>实现页面的跳转

3、搞清楚路由的三个问题
1）安装与配置：设计路径和组件匹配关系（一一对应关系）
2）和路径url匹配成功的组件，放在哪里进行展示？（router-view容器）
3）如何改变url？（router-link声明式路由，编程式路由）

4、路由的基础知识
1）命名视图：给router-view组件命名，只有名字匹配了组件才能显示在视图中。
2）路由别名：给路由匹配关系取个小名，使用alias属性。
3）命名路由：给路由匹配关系取个名字，使用name属性。
4）重定向：从一个路径自动跳转到另一个路径，使用redirect属性。
5）两种路由模式：History模式 vs. Hash模式，前者部署至服务器会报404.
6）编程式导航：this.$router.push() / replace()。
7）通配符：在定义一一对应的路由匹配关系时，path中可以使用 * 来匹配任意字符。
8）动态路由：{path:'/detail/:id', component: Detail}，在Detail组件中可以使用this.$route.params.id来接收参数。
9）路由传参：{path:'/detail/:id', component: Detail, props:true}props选项来接收参数。
10）嵌套路由：<router-view>组件可以进行多级嵌套，譬如/find/good这样的多级路由。
11）路由懒加载：一种性能优化方案，让组件可以在路由匹配成功时按需加载。
12）路由守卫：对路由匹配行为进行拦截，全局守卫使用router.beforeEach()，局部守卫使用beforeRouteEnter()，常常用于实现登录权限拦截功能。
13）watch侦听器，还可以监听 $route的变化。

三、状态管理vuex

1、初识Vuex

状态：即数据、视图。
状态管理的本质，就是对应用程序的数据进行科学地流程化管理，目标是让数据变化可预期、可控。
Flux一种数据管理架构方案，这是一种数据管理的思想，最早诞生于React团队。
React技术栈中，最出名的状态管理工具是 Redux和Mobx。
Vue技术栈中，最出名的状态管理工具是Vuex。
Vuex只是一种数据管理方案，并不是Vue开发必须的。换句话说，在架构Vue项目时可以不使用Vuex。
虽然可以不使用Vuex，但不得不说Vuex非常强大，所以还是建议尽量用上它。
Vuex常用于实现组件之间的数据交互、程序数据缓存等需求。
Vuex配合devtools，可以非常方便地调试应用程序中的数据bug。

2、安装

cnpm install vuex -S
在src目录中新建一个名为store.js的文件
引入vue、vuex，并注册Vue.use(Vuex)
创建Vuex.Store实例，使用到四个重要选项：state、getters、mutations、actions，并抛出该实例
在main.js中引入并挂载。
如何验证安装成功呢？在任何中访问this.$store。

3、Vuex基础知识点

1）五个核心概念state：用于定义共享数据getters：相当于是计算属性mutations：这是vuex官方建议的用于直接地同步地修改stateactions：这是vuex与后端接口交互的唯一入口，用于间接地异步地修改statemodules：用于把一个完整的根store拆分成多个子模块，以方便工作协同开发，减少工作冲突。
2）如何触发mutations方法？在组件中this.$store.commit('已定义的mutation方法', '负载')建议使用 mapMutations('命名空间', [])进行映射，使用this.进行访问。
3）如何触发actions方法？在组件中this.$store.dispatch('已定义的action方法', '负载')建议使用 mapActions('命名空间', [])进行映射，使用this.进行访问。
4）如何把根store拆分成多个子module？定义子module时，一定要记得加上 namespaced:true 以开启命名空间在 new Vuex.Store({modules: {}}) 中使用modules选项，对多个子module进行组装。
5）四个 mapXXX 的使用mapState 和 mapGetters 只能在computed计算中进行使用。mapMutations 和 mapActions 只能methods选项中进行使用。映射进来的变量和方法，可以使用 this.进行访问，更方便。

四、axios

1、axios有什么优势？

它是基于Promise封装的，用起来非常方便，解决了回调地狱的问题。
它在客户端、node.js服务器都可以进行使用。

2、安装与使用入门

cnpm install axios -S
封装axios：axios.create() 创建axios实例，指定基准URL等字符。封装请求拦截器：axios.interceptors.request.use() 在请求发出之前进行拦截。封装响应拦截器：axios.interceptors.response.use() 在客户端收到响应之前进行拦截。
axios封装完成后，在代码中就可以调后端接口了。axios({url: '', method: 'GET', params: '入参'}).then()axios({url: '', method: 'POST', data: '入参'}).then()

3、axios+vuex走通Vuex全流程（步骤说明）

在actions中封装方法，使用axios调取后端接口，成功后把数据mutation到state中去。
在组件中使用mapActions映射actions方法，在mounted中触发接口调用。
在组件中使用mapState映射state数据，就可以在视图中进行各种渲染了。
注意：如果调接口时产生跨域问题，要在vue.config.js中配置代理并重启项目，进而解决跨域问题。特别注意baseUrl的切换，搞清楚哪个才是你需要访问的服务器地址。

五、rem布局（移动端）

1、理解手机的dpr（屏幕像素密码比）

dpr = 夜晶屏幕px尺寸 / 物理尺寸
常用的dpr有：dpr=2, dpr=3
window.devicePixelRatio这个api可以获取到当前屏幕的dpr

2、区分这个CSS单位

px：绝对尺寸
rem：相对于html元素的字体(r指的是root),如果html的fx=10px，那么1rem=10px
em：相对于当前元素（父级元素）的font-size，如果当前元素的fz=10px，那么1em=10px

3、理解rem布局

所谓的rem布局，就是以rem为单位进行尺寸设置。
做法：无论我们的网页运行在什么硬件上，都把根字体设置成当前硬件屏幕的十分之一，那么10rem=屏幕的宽度。
举例：如果当前屏幕是750px，我们就 root fz=75px  1rem=75px如果当前屏幕是828px，我们就 root fz=82.8px  1rem=82.8在html文件中，1rem=屏幕宽度*0.1  10rem=屏幕宽度
在代码中，1rem = UI稿*0.1  10rem=UI稿的宽度（750px）
在代码中，我们 x(px) = (x/75)rem

4、那我该怎么改root(html)的根字体font-size呢?

 # rem.js// 获取html元素DOM对象var oHtml = document.querySelector('html')// 获取html的总宽度var w = oHtml.getBoundingClientRect().width// 设置根字体的大小等于html节点的宽度的十分之一oHtml.style.fontSize = w/10 + 'px'

5、项目中使用rem布局

在/public/index.html中引入rem.js。
在vscode中安装 px-to-rem 插件，并设置该插件的转化尺寸为 75。
在写样式时，按 alt+Z 可以把px转化为rem。

六、Sass使用

1、安装

cnpm install sass-loader -D
cnpm install node-sass -D

 <style lang="scss" scoped>@import './assets/common.scss';@import '@/assets/common.scss';</style>

要指定style标签的lang='scss'
scoped 属性表示局部样式，仅对当前组件生效。

2、sass基础知识点

全局的 common.scss 样式文件，可以使用 @import 导入。
作用域：sass允许样式嵌套，以形成作用域关系，& 符号代表父级元素。
使用变量：sass中允许定义变量、使用变量，变量使用 $ 来定义。

3、在vue中使用sass要注意的地方

sass这门技术的名字叫 sass
sass样式表的文件后缀是 .scss
在style标签中指定lang时，lang='scss'
使用npm安装node-sass模块时会出错，建议使用cnpm进行安装。

七、vant

1、安装vant

安装vant：cnpm install vant -S
配置按需加载（推荐）：cnpm install babel-plugin-import -D配置babel.config.js文件并重启项目（见vant文档）

2、使用入门

在组件中引入Vant组件：import { Button, Tabbar } from 'vant'
把引入的组件转化成局部组件：components: { [Button.name]: Button, [Tabbar.name]: Tabbar }
在template中使用vant组件：<van-button size='small' type="primary">按钮</van-button><van-tabbar route fixed></van-tabbar>

3、温馨提示

每一个Vant组件都有非常多的自定义属性和自定义事件，一切以文档为准。
在使用第三方组件进行项目开发时，我们大部分时间都是在翻组件文档。

八、接口文档

添加商品：/jd/addGood
方法：POST
入参：
img: String, // 图片
name: String, // 商品名称
desc: String, // 商品描述
price: Number, // 价格
cate: String, // 品类
hot: Boolean, // 是否推荐

获取首页推荐商品：/jd/getHotGoodList
方法：GET
入参：
hot: Boolean 必填, 传true时返回热销推荐的产品，如果不传或false就返回所有商品
page: Number 必填，用于实现分页功能
size: Number 非必填

获取全部品类：/jd/getAllCates
方法：GET
入参：无

基于品类进行筛选：/jd/getCateGoodList
方法：GET
入参：
cate: String 品类的英文字段

获取商品详情：/jd/getGoodDetail
方法：GET
入参：
good_id: String 商品id

添加到购物车：/jd/addToCart
方法：POST
入参：
num: Number 选填，购买数量
good_id: String 商品id

获取购物车列表：/jd/getCartList
方法：GET
入参：无

更改购物车中的商品数量：/jd/updateCartNum
方法：POST
入参：
num: Number 新的数量
id: String 购物车id

删除购物车中的商品：/jd/deleteToCart
方法：GET
入参：
id: String 购物车id

提交购物：/jd/submitToCart
方法：POST
入参：
goods: String 商品id字符串，多个商品id要用英式;进行连接。

九、自主项目（管理系统开发）

1、学习目标

掌握管理系统这种产品的功能形态、开发特点。
能独立使用Vue脚手架、Vue全家桶搭建工程架构、项目架构。
能使用Element、Sass快速完成管理系统的布局，熟练使用常用的表单、表格等组件。
能使用Axios与后端进行数据交互、devtools调试。

2、技术栈

Vue、Vue-Router 单页面应用程序开发
Sass、Element   快速布局、灵活使用组件库完成功能业务需求。
Vuex、Axios       接口联调、功能实现

3、ToB产品 vs. Toc产品

ToB产品：数据交互极其复杂，一般不用设计UI稿、面向原型开发、使用第三方UI组件库快速布局。
ToC产品：常常需要UI设计，用户体验要求极高，产品性能要求也更高。

十、项目打包与部署

开发环境 -> 测试环境？开发环境 -> 生产环境？

1、启动时可用选项

--open 自动打开浏览器
--port 8899  自定义端口，不建议使用

2、图片使用

1）在HMTL、CSS、JS中都可以使用图片。放在assets目录中的图片，最终会被webpack打包并处理。
2）放在public目录中的图片，项目打包时不会被处理；并且放在public中的图片，更能方便地进行CDN加速部署。

<!-- 在HTML中使用图片 -->
<img src="/1.png" alt="图片">
<img src="../assets/logo.png" alt="">
<div class="img1"></div>
<div class="img2"></div><!-- 在CSS中使用图片 -->
.img1 {width: 100px;height: 100px;background: url('/1.png') no-repeat 0 0 / 100px 100px;
}
.img2 {width: 100px;height: 100px;background: url('../assets/logo.png') no-repeat 0 0 / 100px 100px;
}

3）工作中，我们建议使用模块化来管理项目中所有被使用到的图片。项目中的图片有三个来源，分别是assets目录、public目录和远程外部图片。模块化写法参考如下：

// 开发环境：指向 public 目录
let cdnUrl = '/'
// 线上环境：当项目打包上线时，把cdnUrl切换成图片服务器地址
// let cdnUrl = 'https://qiniu.com/qf/webapp'export default {// 远程外部图片jdicon: 'https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/50018/39/8127/229510/5d5b5043E66769ff0/8907776f7bd66d57.jpg.dpg',// assets目录中的图片logo: ()=>import('@/assets/logo.png'),a: ()=>import('@/assets/imgs/a.png'),// public目录中的图片car: cdnUrl + 'icons/car.png',train: cdnUrl + 'icons/train.png',plane: cdnUrl + 'icons/plane.png'
}

3、publicPath

 .///qf/https://www.qiniu.com/qf/web/

4、hash缓存原理

浏览器缓存原理 filenameHashing: false 关闭hash缓存
实际工作中，不要关闭它。
Hash的作用是为了解决浏览器缓存导致的代码更新问题。

5、多页面配置

不是每个应用都需要是一个单页应用。Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。构建好的应用将会在不同的入口之间高效共享通用的 chunk 以获得最佳的加载性能。

pages: {index: {// page 的入口entry: 'src/main.js',// 模板来源template: 'public/index.html',// 在 dist/index.html 的输出filename: 'index.html',// 当使用 title 选项时，// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>title: '首页',// 在这个页面中包含的块，默认情况下会包含// 提取出来的通用 chunk 和 vendor chunk。chunks: ['chunk-vendors', 'chunk-common', 'index']},// 当使用只有入口的字符串格式时，// 模板会被推导为 `public/subpage.html`// 并且如果找不到的话，就回退到 `public/index.html`。// 输出文件名会被推导为 `subpage.html`。about : {entry: 'src/main.js',title: '关于我们',chunks: ['chunk-vendors', 'chunk-common', 'index']}
}

6、项目部署

域名购买与备案、DNS解析服务
云服务器购买、虚拟主机
nginx安装与使用、History模式重定向处理
数据库安装与使用

【无标题】项目的搭建相关推荐

解决VS调试web项目启动谷歌浏览器“无标题”、“已崩溃”问题
解决VS调试web项目启动谷歌浏览器"无标题"."已崩溃"问题方法一: 尝试添加任意一个参数,如 --no-sandbox--test-type --no-s ...
(三) Angular2项目框架搭建心得
前言: 在哪看到过angular程序员被React程序员鄙视,略显尴尬,确实Angular挺值得被调侃的,在1.*版本存在的几个性能问题,性能优化的"潜规则"贼多,以及从1.*到2 ...
C# 系统应用之无标题窗体移动的两种方法
在做项目界面设计中,常常为了美观需要设置窗体属性"FormBorderStyle"(窗体边框和标题栏外观)为None无标题窗口.此时隐藏标题的窗口怎样实现移动呢?我根据自己的项目从 ...
Android 应用开发（1）---Android项目架构搭建
Android项目架构搭建 1. 前言安卓属于小团队开发,架构的重要性在很多公司其实不是那么的明显,加上现在的开源框架层出不穷,更好的帮助我们上手android项目的开发.我前两年也在公司主导过项目 ...
云服务器部署项目环境搭建
云服务器部署项目环境搭建这里以阿里云为例: 一.安装JavaJDK 指令: yum -y install java-1.8.0-openjdk* 二.下载部署TomCat 去TomCat官网下载:T ...
Android最好用的项目框架搭建
本篇先记录下当前项目中涉及的主要技术要点.也算是对所作项目的一次总结.如果这个过程能对你有些许的帮助,那可能就显得有意义点了. 一个完整的Android项目会涉及后台和前端.我们只关注于前端,也就是我 ...
django项目环境搭建
项目环境搭建在github上创建项目官网: https://github.com/ 点击new 新建项目公钥绑定使用 git clone 项目到本地一.在码云平台创建项目版本控制的种类: ...
用ardupilot 做无人船项目的总结
用apm做无人船项目,前后一共两年,无人船主控的自动巡航精度与船的整体性能基本稳定,IPD小批量(业务量小,小批量足以).下一代无人船系统框架刚讨论出来,项目成员由于各种原因,散了,还是挺怀念当初一起 ...
Flutter项目快速搭建指南
本文字数:8683字预计阅读时间:30 分钟前言: 笔者在这之前已经有一年时间没有接触过flutter项目的开发了,目前由于新项目的需要,要重新开始搭建一个flutter项目.让我感到惊讶的是,f ...
【Youtobe trydjango】Django2.2教程和React实战系列一【项目简介 | 搭建 | 工具】
[Youtobe trydjango]Django2.2教程和React实战系列一[项目简介 | 搭建 | 工具] 1.环境与选型说明 2.技术栈选型说明 3.django搭建详解 3.1. 项目虚拟 ...

【无标题】项目的搭建

【无标题】项目的搭建相关推荐

最新文章

热门文章