VUE_2脚手架

1. 什么是: 一套已经包含核心功能和标准文件夹结构的半成品项目。
2. 为什么: 标准化！极其便于协作，降低学习成本。
3. 何时: 今后所有项目，所有新技术，都是在脚手架基础上开发的.
4. 如何: 2大步: 
  (1). 安装可以反复生成脚手架的工具: （老母鸡）
   a. 设置淘宝镜像——下载快
    npm config set registry https://registry.npm.taobao.org
    b. 安装可生成脚手架代码的命令行工具
    npm  i  -g  @vue/cli
    当看到: + @vue/cli@版本号 说明安装成功
  (2). 用工具反复为每个项目创建专门的脚手架结构: 
  a. 决定把项目文件夹保存在哪个位置
  b. 再在整个文件夹位置，运行: vue create 自定义项目名
    1). ? Please pick a preset:
       Default ([Vue 2] babel, eslint)
       Default (Vue 3) ([Vue 3] babel, eslint)
    > Manually select features
    2). ? Check the features needed for your project:
      ( ) Choose Vue version //按空格切换选中/不选中
      (*) Babel  //ES6翻译为ES5
      ( ) TypeScript  //下周一学VUE3再选
      ( ) Progressive Web App (PWA) Support
      (*) Router //VueRouter，SPA应用的核心
      (*) Vuex //下周一讲
      (*) CSS Pre-processors //支持Scss
      ( ) Linter / Formatter //不要选，代码质量检查工具，要求过于严格
      ( ) Unit Testing
    >( ) E2E Testing
    3). ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) N
    其实vue的路由有两种模式: 
    i. hash(#)模式: http://域名:端口号/#/相对路径
    ii. history模式: http://域名:端口号/相对路径
       需要专业的服务器端工程师配合——必须配置服务器端的首页重定向机制。
    4). ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
  > Sass/SCSS (with dart-sass)
    Sass/SCSS (with node-sass)
    Less
    Stylus
    5). ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
      In dedicated config files
    > In package.json
    6). ? Save this as a preset for future projects? (y/N) N
    7). 等待。。。
    看到: Successfully created project xzvue. 说明安装成功
5. 使用vscode打开并运行脚手架项目: 
  (1). 右键单击package.json文件，选择"在集成终端中打开"
  (2). 在终端窗口中输入: npm run serve
      看到: App running at:
           - Local:   http://localhost:8080/
  (3). 按住Ctrl，点local:右侧的连接，自动打开浏览器
    问题: 如果无法自动打开，可重装chrome浏览器并配置操作系统的默认浏览器为chrome。