vue.js越来越火爆.更多的项目vue进行开发,实际开发搭建开发脚手架. html css javascript, node.js环境(npm包管理工具) , webpack构建工具 webpack是一个静态资源构建,打包的工具
构建 开发。编译 打包 之后 配置文件修改 部署
首先需要准备
1.安装node.js
2.版本10.0.0以上 默认c盘
3.可下载淘宝镜像 比较稳定 也可以使用yarn
4.安装vue-cli脚手架构建工具
cnpm install -g @vue-cli 全局安装
vue -V查看版本 3.0为4.5.6
5.创建vue3.0项目
vue create 项目名称
vue3.0和2.0区别
1、vue2使用Object.defineProperty方法实现响应式数据,vue3使用proxy实现响应式数据
Object.defineProperty的缺点:
无法检测到对象属性的动态添加和删除
无法检测到数组的下标和length属性的变更
解决方法:
vue2提供Vue.$set动态给对象添加属性
Vue.$delete动态删除对象属性
重写数组的方法,检测数组变更
proxy的缺点:
es6的proxy不支持低版本浏览器(IE11)
会针对IE11出一个特殊版本进行支持
proxy的有点:
可以坚持到代理对象属性的动态新增和删除
可以监测到数组的下标和length属性的变化
举个栗子:
过去的2.0就像是我们在餐厅吃饭,是等菜上齐了我们再开始吃饭,有的时候菜点多了就会造成不必要的浪费。而现在的3.0更像是在吃自助餐,你吃多少就拿多少,就不会造成浪费。
2、vue3新特性:
①:数据响应重新实现(ES6的proxy代替ES5的Object.defineProperty)
②:源码使用ts重写,更好的类型推导
③:虚拟DOM新算法(更快、更小)
④:提供了composition api,为更好的逻辑复用与代码组织
⑤:自定义渲染器(app、小程序、游戏开发)
1.项目目录结构
vue-cli2.0与3.0在目录结构方面,有明显的不同
vue-cli3.0移除了配置文件目录,config 和 build 文件夹
同时移除了 static 静态文件夹,新增了 public 文件夹,打开层级目录还会发现, index.html 移动到 public 中
2.配置项
3.0 config文件已经被移除,但是多了.env.production和env.development文件,除了文件位置,实际配置起来和2.0没什么不同
没了config文件,跨域需要配置域名时,从config/index.js 挪到了vue.config.js中,配置方法不变
3.渲染
Vue2.x使用的Virtual Dom实现的渲染
Vue3.0不论是原生的html标签还是vue组件,他们都会通过h函数来判断,如果是原生html标签,在运行时直接通过Virtual Dom来直接渲染,同样如果是组件会直接生成组件代码
4.数据监听
Vue2.x大家都知道使用的是es5的object.defineproperties中getter和setter实现的,而vue3.0的版本,是基于Proxy进行监听的,其实基于proxy监听就是所谓的lazy by default,什么意思呢,就是只要你用到了才会监听,可以理解为‘按需监听’,官方给出的诠释是:速度加倍,同时内存占用还减半。
4.按需引入
Vue2.x中new出的实例对象,所有的东西都在这个vue对象上,这样其实无论你用到还是没用到,都会跑一变。而vue3.0中可以用ES module imports按需 ⑥:Fragment,模板可以有多个根元素引入,如:keep-alive内置组件、v-model指令,等等。
//vue3.0
import { createApp } from 'vue';
import App from './App.vue'
createApp(App).mount('#app')
//vue2.0
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
开发
编码规范 前端接口规范
项目结构
vue已经给新建了一个初始的项目结构,可是这个项目结构还不够完善。咱们须要新建一下几个目录,全部新建的目录都保存在src目录下面。
1.views用户存放咱们的页面
2.store 放置vuex程序
3.api 放置全部的接口程序
4.utils 放置工具函数
5.router 放置路由信息
6.styles 放置全局样式
7.components 这个文件已经有了,用来存放咱们页面中的组件,咱们能够把组件新建在这个目录下面,不过这样并不清晰,我们要为每一个页面新建一个文件夹,把每一个页面的组件放在对应的文件下.关于编码规范会有相应的文档供参考
前端打包项目
使用指令npm run build
会生成一个dist文件夹
可能会遇到的问题(之前遇到过):
使用element框架的icon时候,开发环境下是没有问题的,打包完以后出现小方块
当然,也有可能出现引用element图标等资源丢失的问题。我们可以这样:
解决办法:找到utils.js文件,(大约在50行)加 publicPath: ‘…/…/’
```javascript
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' //修改这个地方
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
2.点击dist文件夹中的index.html,通过浏览器运行,出现以下报错,如图:
四、那么应该如何修改呢?
具体步骤如下:
1、查看package.js文件的scripts命令
2、打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件
3、其中dev是开发环境,build是构建版本,找到build下面的assetsPublicPath: ‘/’,然后修改为assetsPublicPath: ‘./’,即“/”前加点。
4、终端运行 npm run build 即可。
此时点击index.html,通过浏览器运行便,会发现动态绑定的static的图片找不到,故static必须使用绝对路径。将图片路径修改为绝对路径,至此,打包完成
2.就 多环境打包,要不就拿到config.js
3.跨域问题
后端需要配合的问题
- 后段的话尽量用标准化的rest接口,统一 出入参格式,统一错误代码 错误消息等