vue-cli4.0搭建

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接口，统一 出入参格式，统一错误代码 错误消息等