超详细使用vue cli脚手架自定义创建项目教程

1,568 阅读1分钟

安装和检查node版本

输入 node -v

查看npm版本

 输入npm -v

 使用npm安装脚手架

 输入 npm install -g @vue/cli

 查看vue脚手架是否安装完成

 输入vue -v

 创建一个vue项目,进入到准备放置项目的文件夹中

格式 vue create XXX项目名

输入 vue create hellw-world

进入到选项 =>
1、defalut 默认设置
Manually 自定义设置 ☑️

2、Choose Vue version 选择vue版本
Bable 基础编译器 ☑️
TypeScirpt 使用TypeScript
Progressive Web App(PWA) Support 渐进式web应用
Router 路由管理器 ☑️
Vuex 项目状态管理 ☑️
Css Pre-processors Css预处理器 ☑️
Linter / Formatter 代码风格检查和格式化 ☑️
Unit Testing 单元测试 E2E testing 端对端测试

3、Use history mode for router? 选择history模式或者hash模式? Y

4、选择使用的预处理器
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less ☑️
Stylus

5、选择eslink模式
ESLint with error prevention only ☑️
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier

6、触发ESLink机制
Lint on save 保存时检查 ☑️
Lint and fix on commit 提交到远程时检查

7、Where do you prefer placing config for Bable, ESLint . etc?
In dedicated config files 配置文件放入独立文件中 ☑️
In package Json 配置文件放入package.json中

8、Save this as a preset for future projects? 是否记住我们的预设?
No

进入项目文件夹中,运行项目

输入 npm run serve