1、安装nodenode官网下载安装
2、安装vue-cli
npm install -g @vue/cli
3、打开终端,进入文件夹
npm create project//创建项目project,点击enter继续
4、选择创建项目
选择配置方式
vue2是我之前创建项目环境用到的一些配置保存下来的,这里新手可以选择Manually select feature,自己手动配置
5、选择需要配置的,如Babel转码器(空格选中或取消选中)
配置
Babel:将ES6转码为ES5(因为有些浏览器对于ES6、ES7的语法无法识别,需要将其转换为ES5的语法)
TypeScript//开发语言中使用就需要选择,这里我们使用到的是js,
Progressive Web App (PWA) Support// 渐进式Web应用程序
Router // vue-router(vue路由)
Vuex // vue的状态管理模式
CSS Pre-processors // CSS 预处理器(如:less、sass)
Linter / Formatter // 代码风格检查和格式化(如:ESlint)
Unit Testing // 单元测试(unit tests)
E2E Testing // e2e(end to end) 测试
6、选择Vue版本
7、选择Vue-router是否使用History模式
Vue-Router模式
看到一篇关于Vue-Router的两个模式Hash和History不错的介绍,可参考Hash和History
8、选择CSS预编译器,我选个less来用用
node-sass是自动编译实时的,dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。
9、代码检测Eslint
Eslint
10、选择测试框架
测试框架
Mocha + Chai //mocha灵活,只提供简单的测试结构,如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Jest //安装配置简单,容易上手。内置Istanbul,可以查看到测试覆盖率,相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect
11、选择配置文件建立方式,是单独生成文件还是在package.json中
文件生成方式
独立建文件
在package.json文件中配置
12、上面的配置是否需要保存一共下次构建项目直接使用,也就是类似于我在第4步所说的vue2是之前创建过的,选择yes则为该环境取个名字,下次直接使用
image.png
13、启动项目
启动项目
至此基本项目搭建完成!关于后续项目学习等将继续补充!
参考:vue搭建项目
网友评论