创建vue项目

1. 开始创建

打开控制台使用命令：vue create 项目名称

选择默认安装的方式可以非常快速创建一个新项目的原型，而手动安装则提供了更多的选项，它们是面向生产的项目更加需要的。

使用键盘方向键我们选择手动安装：按下 Enter 键选中，弹出如下界面：

vue-cli 内置支持了多个功能特性，对于每一项的功能，此处做个简单描述：

babel # Babel是一个工具，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
TypeScript # 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support # PWA（让网页渐进式地变成App ）支持
Router # 支持 vue-router
Vuex # 支持 vuex 。
CSS Pre-processors # 支持 CSS 预处理器。
Linter / Formatter # 支持代码风格检查和格式化。
Unit Testing # 支持单元测试。
E2E Testing # 支持 E2E 测试。

2. 选择配置

使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择所有，使用 i 键翻转选项，可以多选。

根据你的项目需要来选择配置

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
// 检查项目所需的功能:(按<space>选择，<a>切换所有，<i>反转选择）
>( ) babel                                      //Babel工具
 ( ) TypeScript                                 // 支持使用 TypeScript 书写源码
 ( ) Progressive Web App (PWA) Support          // PWA 支持
 ( ) Router                                     // 支持 vue-router
 ( ) Vuex                                       // 支持 vuex
 ( ) CSS Pre-processors                         // 支持 CSS 预处理器。
 ( ) Linter / Formatter                         // 支持代码风格检查和格式化。
 ( ) Unit Testing                               // 支持单元测试。
 ( ) E2E Testing

2.1 选择css预处理器

如果你选择了Css预处理器选项，会让你选择这个

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
# 选择CSS预处理器（默认支持PostCSS，Autoprefixer和CSS模块）：
> SCSS/SASS
  LESS
  Stylus

2.2 是否使用路由的history模式：

这里我建议选No，这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。

选 yes 的话需要服务器那边再进行设置。

Use history mode for router? (Requires proper server setup for index fallback in production): No
# 路由使用history模式?(在生产环境中需要适当的服务器设置以备索引)

2.3 选择Eslint代码验证规则：

> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

2.4 选择什么时候进行代码规则检测：

建议选保存就检测(或者二者同时选中),等到commit的时候，问题可能都已经积累很多了。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Lint on save // 保存就检测
 ( ) Lint and fix on commit // fix和commit时候检查

2.5 选择e2e测试:

? Pick a E2E testing solution: (Use arrow keys)
❯ Cypress (Chrome only) 
  Nightwatch (Selenium-based) 

2.6 把babel、postcss、eslint这些配置文件放哪：

通常我们会选择独立放置，让 package.json 干净些

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files # 独立文件放置
  In package.json # 放package.json里

2.7 是否保存配置：

Save this as a preset for future projects? (Y/n) # 是否记录一下以便下次继续使用这套配置
# 选保存之后，会让你写一个配置的名字：
Save preset as: name # 然后你下次进入配置可以直接使用你这次的配置了

3. 启动项目

选择合适的配置，等待项目初始化完之后需要启动项目，依次使用如下命令：

# 切换到当前的项目文件中
cd hello-world

# 启动项目：
npm run serve

在浏览器中里地址栏输入：http://localhost:8080/，出现下面的页面，说明项目启动成功：

4. 项目文件介绍

项目创建完成后生成了很多的文件，如下:

每个文件的意义是：

├── .git                        #git
|__.node_modules                #第三方包
|-- dist                           # 打包后文件夹
├── babel.config.js             # babel语法编译
├── package-lock.json 
├── public                        # 静态文件夹,这类资源将会直接被拷贝，而不会经过 webpack 的处理。
│   ├── favicon.ico
│   └── index.html                #入口页面
└── src                            # 源码目录
    ├── App.vue - 页面
    ├── assets  - 静态目录,这类引用会被 webpack 处理。
    │   └── logo.png
    ├── components 组件
    │   └── HelloWorld.vue
    └── main.js                  # 入口文件，加载公共组件
│—— vue.config.js                # 配置文件，需自行配置 
│—— .gitignore                   # git忽略上传的文件格式   
│—— babel.config.js                # babel语法编译                        
│—— package.json                    # 项目基本信息 
│—— .browserslistrc                 # 指定了项目的目标浏览器的范围 
│—— .jsconfig.json                  # 提供了大量能使我们快速便捷提高代码效率的方法。                  
|---README.md                       # 说明

5. 打包上线

在开发完项目之后，就应该打包上线了。vue-cli 也提供了打包的命令，在项目根目录下打开命令窗口，执行命令：npm run build

执行完之后，可以看到在项目根目录下多出了一个 dist 目录，这个就是打包后的页面文件，到时候只需要将这个发给后端，让其部署上线即可。

6. 小提示

.jsconfig.json 文件:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            // 解决项目中使用@作为路径别名，导致vscode无法跳转文件的问题
            "@/*": ["src/*"]
        },
        // 解决prettier对于装饰器语法的警告
        "experimentalDecorators": true,
        // 解决.jsx文件无法快速跳转的问题
        "jsx": "preserve"
    },
    //提高 IDE 性能
    "exclude": ["node_modules", "dist", "build"]
}