一、安装Node
https://nodejs.org/en 点此链接下载进行安装,选择稳定版本
二、全局安装 vue-cli3.0
npm install -g @vue/cli 如果之前有安装需要先卸载掉低版本 npm uninstall vue-cli -g
三、创建项目
1、vue create vue-3.0 执行该命令后出现两个选项default (babel, eslint)默认预设配置 和Manually select features(手动选择配置),这里我们选择手动配置
然后回车进入配置选择项
❯◉ Babel
◯ TypeScript // 支持使用 TypeScript
◯ Progressive Web App (PWA) Support //支持渐进式web应用程序
◯ Router //路由管理器
◯ Vuex //支持 vuex
◯ CSS Pre-processors //CSS预处理
◉ Linter / Formatter // 代码风格、格式校验
◯ Unit Testing //单元测试
◯ E2E Testing //e2e自动化模拟
2、是否使用路由的 history 模式
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) //我们选择是 Y
3、CSS Pre-processors css预处理 (我选择Less)
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
❯ Less
Stylus
4 、Pick a linter / formatter config: 选择Eslint代码验证规则(我们选择ESLint + Standard config 标准配置)
ESLint with error prevention only
ESLint + Airbnb config
❯ ESLint + Standard config
ESLint + Prettier
5、 Pick additional lint features: 选择什么时候进行代码规则检测(我们选择保存时进行检查)
❯◉ Lint on save // 保存时检测
◯ Lint and fix on commit // fix和commit时候检查
6 、Pick a unit testing solution: Unit Testing 单元测试(我们选择Jest )
Mocha + Chai
❯ Jest
7、Where do you prefer placing config for Babel, ESLint, etc.?(您希望Babel, ESLint 配置的存放位置,我们选择在专用的配置文件中)
In dedicated config files //在专用的配置文件中
In package.json //在package.json
8、Save this as a preset for future projects?(y/N) (是否保存配置 我们可以选择Y ,保存后下次构建项目的时候就可以直用这次的配置构建项目)
9、构建完成
10、进入vue-3.0,执行npm run serve命令运行项目访问http://localhost:8080/
END