使用vue-cli创建项目

1. 定位到你的工作目录,打开终端(会在你的工作目录下新建项目)
2. 全局安装vue-cli

   npm install vue-cli -g

3. 查看版本

   vue -V

   
4. 基于webpack来构建一个名称为hello的vue项目

   vue init webpack hello

5. 出现提示

   Command vue init requires a global addon to be installed.
   Please run yarn global add @vue/cli-init and try again.

6. 安装@vue/cli-init

   npm i -g @vue/cli-init

7. 继续建项目

   vue init webpack hello

8. 出现提示

   Project Name：要创建的项目名称（回车 ）

   Project Description：项目简介（回车 ）

   Author：作者

   下一步直接回车

   Install vue-router：是否安装vue路由组件，做项目的话一定要安装（y ）

   Use ESLint to lint your code：是否需要使用ESLint模块进行代码检测（y ）

   Set up unit tests: 是否需要自动化单元测试(y)

   Pick a test runner :(回车)

   Setup e2e tests with Nightwatch?：是否安装端到端的测试（y ）

   Should we run `npm install` for you after the project has been created? (recommended): 在后续安装依赖包是是否使用npm install安装(是,回车)

9. 完成
   

    

10. 项目目录

    build：项目webpack配置文件
    config：针对开发环境和线上环境的配置文件
    node_modules：项目依赖包
    src：源代码目录
    static：静态资源
    .babelrc：JavaScript 语法的编译器
    .editorconfig：针对babel的编译，浏览器配置
    .eslintignore：针对babel的编译，eslint检测规则配置
    .eslintrc.js：针对babel的编译，eslint检测规则配置
    .gitignore：git 配置文件
    .postcssrc.js：转换成css格式的插件
    index.html：整个项目的入口index页，包含根实例的挂载点
    package.json：定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）
    package-lock.json：其实package-lock就是锁定安装时的包版本号，需要上传到git上，以保证其他人在install时候，大家的依赖版本相同

11. src目录下文件介绍
    main.js:整个项目入口文件

    el：#app
    创建了一个vue的实例app让其挂载在index.html的id=app的节点上
    components: { App }
    注册局部组件APP，APP来源：import App from './App'，即引入当前目录下的APP.vue组件
    template: '<App/>'
    定义模板为APP组件的内容
    即，main中创建vue实例展示的就是APP.vue组件中的内容

    APP.vue：单文件组件，包含三部分

    第一部分：<template>模板部分
    第二部分：<script>逻辑部分
    第三部分：<style>样式部分