Vue的环境搭建及安装过程

时间:2024-10-03 14:34:28
第一步, vue create 后会出现 至少3个选项,
( 第一个选项是默认安装vue2,babel,eslint
第二个选项是默认安装 vue3,babel,eslint
第三个选项 (Manually select features) 自定义安装)
在这里插入图片描述 第二步,选择自定义安装
(第一个选项 vue的版本
第二个 babel
第三个 ts 先不选
第四个 PWA 离线缓存
第五个 Router 路由
第六个 vuex 公共数据存储
第七个 css 预处理语言 (less,sass,stylus)
第八个 linter 代码监测
第九,十个 代码测试 )
在这里插入图片描述第三步:
选择vue的版本
在这里插入图片描述Class-style组件,先选no
在这里插入图片描述Babel 解析ts ,选y
在这里插入图片描述路由模式:
是否使用history模式
选y 就是 history模式
选n 就是 hash模式
在这里插入图片描述Css 预处理语言
(选项1:sass(dart-sass) 新版本的sass语法,速度比较快,一般使用sass都选这个版本
选项2:sass(node-sass) 老版本的sass语法
选项3: less
选项4: stylus)
在这里插入图片描述Lint 的配置
(选项1:eslint 基础版本
选项2:eslint + airbnb 特别严格的版本
选项3:eslint + standard 比较严格的版本
选项4:eslint + prettier 加代码规范
选项5:tslint 监测ts)
在这里插入图片描述lint功能什么时候执行
(选项1:保存时代码监测
选项2:提交(commit)时或运行监测时)
在这里插入图片描述代码测试的工具:
(选项1:Mocha + chai
选项2:jest )
在这里插入图片描述E2e 测试工具:
Nightwatch 相对多一些
在这里插入图片描述代码测试使用的浏览器:
Chrome
firefox
在这里插入图片描述第四步:
Babel,eslint 的配置文件要放在哪?
(选项1: 生成独立的配置文件
选项2: 生成到中)
在这里插入图片描述第五步:
是否保存当前配置
默认不保存
选y就是保存
在这里插入图片描述如果保存,会让定义一个名称
在这里插入图片描述第六步:
安装
在这里插入图片描述安装完成
在这里插入图片描述目录结构:
在这里插入图片描述安装开发工具插件:
在这里插入图片描述