vue3+ts创建前端blog项目

ゝ一纸荒年。 2023-10-16 17:20 53阅读 0赞

#### vue3创建blog项目 ####

*  cmd
 *  创建
 *  Manually select features
 *   *  Choose Vue version
     *  Use class-style component syntax? (Y/n)
     *  Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
     *  Use history mode for router?
     *  Pick a CSS pre-processor?
     *  Pick a linter / formatter config?
     *  Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
     *  Save this as a preset for future projects?
 *  下载配置中
 *  下载完成
 *  使用ws打开项目
 *  先加载一下
 *   *  npm install
     *  npm run serve
 *  前端项目启动成功！

## cmd ##

![在这里插入图片描述][383927d85f40468eb66a524e2fb89ff1.png]

## 创建 ##

vue create 项目名

![在这里插入图片描述][c018711c4c1c4b3ea12a1fba86f94bc4.png]  
注意：此时 我的脚手架是4.5.9  
如果脚手架过低 npm uninstall vue-cli -g  
npm install -g @vue/cli  
![在这里插入图片描述][ec391971e8504c2aac9cd45a2e299935.png]

## Manually select features ##

选择 Manually select features 手动创建  
![在这里插入图片描述][2993571fcf6a4050a2de3696b8156f1a.png]

Choose Vue version  选择vue脚手架的版本
    Babel：				使用babel，便于将我们源代码进行转码（把es6=>es5）【推荐选择】
    TypeScript：		使用TypeScript进行源码编写，使用ts可以编写强类型js，对我们的开发有很大的好处
    Progressive Web App(PWA)：使用渐进式网页应用（PWA）可以让网站的体验变得更好，能够模拟一些原生功能
    Router：			使用vue-router【推荐选择】
    Vuex：				使用vuex状态管理器
    CSS Pre-processors：使用CSS预处理器，比如：less，sass等
    Linter/Formatter：使用代码风格检查和格式化（如：ESlint）【推荐选择】
    	eslint:是一个代码检查工具,用来检查你的代码是否符合指定的规范(例如: = 的前后必须有一个空格)[但会出现过于严苛的情况]
    Unit Testing：		使用单元测试
    E2E Testing：		使用E2E测试, end to end（端到端）是黑盒测试的一种

下边是我的选择：  
![在这里插入图片描述][0a2abab0618e4cc89dc5907315daad9a.png]

### Choose Vue version ###

![在这里插入图片描述][045aec931ee4416db067aef88b89d7ba.png]

### Use class-style component syntax? (Y/n) ###

是否使用Class（类）风格装饰器,  
即通过export default class Home extends Vue\{\} 创建Vue实例  
y【推荐选择】

### Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) ###

使用Babel做转义, 与TypeScript一起用于自动检测  
y【推荐选择】

### Use history mode for router? ###

路由模式, 是否选择history模式，启用history模式，项目build之后，可能会出现打开页面空白的情况哦  
y【推荐选择】

### Pick a CSS pre-processor? ###

选择一种css 预处理器  
Sass/SCSS(with dart-sass)【推荐选择】  
node-sass是自动编译实时的，  
dart-sass需要保存后才会生效。

### Pick a linter / formatter config? ###

选择一种代码格式化检测工具  
TSLint: ts格式检验工具  
ESLint with error prevention only: ESLint 只会进行错误提醒【推荐选择】  
ESLint + Airbnb config: ESLint Airbnb标准  
ESLint + Standard config: ESLint Standard 标准  
ESLint + Prettier: ESLint（代码质量检测）+ Prettier（代码格式化工具）

### Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? ###

Babel, PostCSS, ESLin等配置文件怎么存放, 是放到单独的配置文件中?  
还是package.json里?  
这里方便配置清晰好看, 我选择每个配置单独文件。  
全放在package.json。【推荐选择】  
【看个人，我是嫌全部单独配置文件，项目列表多且杂】

### Save this as a preset for future projects? ###

是否需要保存当前配置，在以后的项目中可快速构建? 保存后, 后续创建项目时可以直接选择该配置, 不需单独配置  
【我是希望以后这个文件样式还会用到，选择y，  
单独需要写一个名字，用来以后再找这个配置模式的东西  
】  
![在这里插入图片描述][f25509730e684d0394a67670573678e5.png]

## 下载配置中 ##

![在这里插入图片描述][2be87ed0f5c44142bf46dad031175e82.png]

## 下载完成 ##

![在这里插入图片描述][c238215361c646009fd492ef5d73d947.png]

## 使用ws打开项目 ##

![在这里插入图片描述][213d930038a34a0293fa91cb8d6a425a.png]

## 先加载一下 ##

### npm install ###

![在这里插入图片描述][49089785742e4812afc02b8e974908b4.png]

### npm run serve ###

![在这里插入图片描述][a2c2c92e2fd9492089cc7b0496248445.png]  
![在这里插入图片描述][897daf5d20b64e9fa92facaae7257d0a.png]

## 前端项目启动成功！ ##

![在这里插入图片描述][b856efb989b54f09aaa08f5359a7e708.png]

[383927d85f40468eb66a524e2fb89ff1.png]: https://img-blog.csdnimg.cn/383927d85f40468eb66a524e2fb89ff1.png
[c018711c4c1c4b3ea12a1fba86f94bc4.png]: https://img-blog.csdnimg.cn/c018711c4c1c4b3ea12a1fba86f94bc4.png
[ec391971e8504c2aac9cd45a2e299935.png]: https://img-blog.csdnimg.cn/ec391971e8504c2aac9cd45a2e299935.png
[2993571fcf6a4050a2de3696b8156f1a.png]: https://img-blog.csdnimg.cn/2993571fcf6a4050a2de3696b8156f1a.png
[0a2abab0618e4cc89dc5907315daad9a.png]: https://img-blog.csdnimg.cn/0a2abab0618e4cc89dc5907315daad9a.png
[045aec931ee4416db067aef88b89d7ba.png]: https://img-blog.csdnimg.cn/045aec931ee4416db067aef88b89d7ba.png
[f25509730e684d0394a67670573678e5.png]: https://img-blog.csdnimg.cn/f25509730e684d0394a67670573678e5.png
[2be87ed0f5c44142bf46dad031175e82.png]: https://img-blog.csdnimg.cn/2be87ed0f5c44142bf46dad031175e82.png
[c238215361c646009fd492ef5d73d947.png]: https://img-blog.csdnimg.cn/c238215361c646009fd492ef5d73d947.png
[213d930038a34a0293fa91cb8d6a425a.png]: https://img-blog.csdnimg.cn/213d930038a34a0293fa91cb8d6a425a.png
[49089785742e4812afc02b8e974908b4.png]: https://img-blog.csdnimg.cn/49089785742e4812afc02b8e974908b4.png
[a2c2c92e2fd9492089cc7b0496248445.png]: https://img-blog.csdnimg.cn/a2c2c92e2fd9492089cc7b0496248445.png
[897daf5d20b64e9fa92facaae7257d0a.png]: https://img-blog.csdnimg.cn/897daf5d20b64e9fa92facaae7257d0a.png
[b856efb989b54f09aaa08f5359a7e708.png]: https://img-blog.csdnimg.cn/b856efb989b54f09aaa08f5359a7e708.png