# 一、项目初始化
## 使用 Vue CLI 创建项目
> 注意:不要使用 Git Bash 执行项目创建操作,使用 cmd 或者 powershell 之类的工具。
> 如果你还没有安装 VueCLI,或者版本低于 4,请执行下面的命令安装或是升级:
>
> ```shell
> npm install --global @vue/cli
> ```
在命令行中输入以下命令创建 Vue 项目:
```shell
vue create toutiao-publish-admin
```
```shell
Vue CLI v4.2.3
? Please pick a preset:
default (babel, eslint)
> Manually select features
```
> default:默认勾选 babel、eslint,回车之后直接进入装包
>
> manually:自定义勾选特性配置,选择完毕之后,才会进入装包
>
> 选择第 2 种:手动选择特性,支持更多自定义选项
```shell
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
( ) Vuex
(*) CSS Pre-processors
>(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
```
> 分别选择:
> Babel:es6 转 es5
> Router:路由
> CSS Pre-processors:CSS 预处理器,后面会提示你选择 less、sass、stylus 等
> Linter / Formatter:代码格式校验,ESLint 代码格式校验
```shell
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
```
> 是否使用 history 路由模式,这里输入 `n` 不使用
```shell
? 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
```
> 选择 CSS 预处理器,这里选择我们熟悉的 Less
```shell
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier
```
> 选择校验工具,这里选择 ESLint + [Standard config](https://standardjs.com/)
```shell
? Pick additional lint features:
(*) Lint on save
>(*) Lint and fix on commit
```
> 选择在什么时机下触发代码格式校验:
> - Lint on save:每当保存文件的时候
> - Lint and fix on commit:每当执行 `git commit` 提交的时候
>
> 这里建议两个都选上,更
前端学习(2453):项目初始化
最新推荐文章于 2024-03-19 10:50:59 发布
本文详细介绍了前端项目初始化的过程,包括创建基本文件结构、配置打包工具、设置环境变量以及安装和管理依赖项。通过实例演示如何使用现代前端构建工具,如Webpack和Babel,为新项目打下坚实的基础。
摘要由CSDN通过智能技术生成