vue pro

# 一、vue start ## 1.create by vue ![image.png](https://cos.easydoc.net/24916735/files/k6b0n91r.png) ## 2.config ### 配置组件 ![image.png](https://cos.easydoc.net/24916735/files/k6b0pugc.png) #### 选取需要的组件 ![image.png](https://cos.easydoc.net/24916735/files/k6b0t37p.png) ### 路由模式 路由是否采用history方式 ![image.png](https://cos.easydoc.net/24916735/files/k6b0whyk.png) 路由有两种模式 hash和history hash:指的是 路由中有"#" eg: http://www.123.com/#/hecore (我们选这个) hisotry:指的是利用H5中的 History Interface中的pushState()和replaceState()方法去除。(此方法需要后端apache tomcat或nginx联合配置,否则404异常) 是否使用 # 取决于团队对于#的理解,以及业务若是iframe嵌入的时候必须去除#。 ### CSS 编译器 ![image.png](https://cos.easydoc.net/24916735/files/k6b14b7u.png) node-sass是自动编译实时的, (我们选择了这个) dart-sass需要保存后才会生效 ### ESlint 代码检测模式 ![image.png](https://cos.easydoc.net/24916735/files/k6b196kc.png) ESLint + Prettier 常用 ### 代码检测时机 ![image.png](https://cos.easydoc.net/24916735/files/k6b1b42t.png) 保存 ### 配置信息的保存 ![image.png](https://cos.easydoc.net/24916735/files/k6b1cd84.png) 单独配置文件 package.json. ### 未来项目是否按照当前配置来做 )(选择n) ![image.png](https://cos.easydoc.net/24916735/files/k6b1ep12.png) # Refer https://blog.csdn.net/weixin_45031595/article/details/99694829 b站,手把手 # 二、Vue2.x & Vue 3.x ## vue 3.x 目录 ![image.png](https://cos.easydoc.net/24916735/files/k6b1jsea.png) ## vue 2.x 目录 ![image.png](https://cos.easydoc.net/24916735/files/k6b1kslq.png) ## 区别 vue 3.x - 去除了 static、config、build - 新增了public - 自动依赖 node_modoules - 默认配置webpack,通过vue.config.js修改 - vue.inspect可查看webpack默认配置 - 内置了vue-cli-service serve服务 - 浏览器GUI界面 命令行vue-ui可打开 - 构建方式 使用 vue create xx 代替 vue init webpack xx # 三、重置页面 ## 3.1 vue.config.js ## 3.2 重置路由