1.创建项目

要是有VueCLI,命令,必须先安装,《安装vue-cli》

vue create v1

v1 项目名称,(同时,vue 也提供了图形化界面创建项目,只需输入 vue ui 命令就可以打开图形界面)
在这里插入图片描述
大意:请选择一个预设(有3个预设置)

Default ([Vue 2] babel, eslint)  
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features  # 手动选择功能

2.选择 Manually select features创建

在这里插入图片描述

Vue CLI v4.5.4
? Please pick a preset: Manually select features
# 检查项目所需的功能:(按<space>选择,<a>切换全部,<i>反转选择)
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) 
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing 
序号 选项 描述 选择
1 Choose Vue version 选择Vue版本 Y
2 Babel vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5 Y
3 TypeScript TypeScript通过添加类型来扩展JavaScript。通过了解JavaScript,TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器,任何操作系统,任何运行JavaScript的地方。 完全开源
4 Progressive Web App (PWA) Support 渐进式Web应用程序(PWA)支持
5 Router 路由
6 Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
7 CSS Pre-processors CSS预处理器,预处理器:比如要用sass或者cssNext就要按照人家规定的语法形式,就是用人家的语法去编写,然后人家把你编写的代码转成css。
8 Linter / Formatter 格式化程序 Y
9 Unit Testing 单元测试
10 E2E Testing 端到端(end-to-end)

请按照你自己的需求选择,我的选择如上图示。

2.1.Choose Vue version

选择版本;
2.x
3.x (Preview) 

2.2.Linter / Formatter

选择:编码规则
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier

ESLint with error prevention only 只配置使用 ESLint 官网的推荐规则 这些规则在这里添加链接描述
ESLint + Airbnb config 使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置 Airbnb
的规则在这里添加链接描述 ESLint + Standard config 使用 ESLint 官网推荐的规则 + Standard
第三方的配置 Standard 的规则在这里 添加链接描述 ESLint + Prettier 使用 ESLint 官网推荐的规则 +
Prettier 第三方的配置 Prettier 主要是做风格统一。代码格式化工具

 Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)

(*) Lint on save
( ) Lint and fix on commit

问:您希望在哪里放置Babel,ESLint等的配置?

Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files #在专用配置文件中
In package.json 

问:将此保存为预设以供将来的项目使用吗? (是/否)

Save this as a preset for future projects? (y/N)    

(回答) y
问:保存位置

Save preset as:   

(回答)
我直接给文件名称:v1_preset,没有给路径,运行会提示保存在哪里,如下图示:
在这里插入图片描述
完后》开始安装
在这里插入图片描述

3.创建完后的项目

在这里插入图片描述

4.运行项目

 cd v1
 npm run serve

运行成功:
在这里插入图片描述

5.访问项目

在这里插入图片描述

6.后续遗留问题

问题1:我是不是可以用预设文件去创建项目呢?
问题2:其他模式创建是什么样的?
问题3:要是选择其他组件支持,创建时是什么样的?

7. 参考

https://www.it610.com/article/1282792812634456064.htm

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐