Create a project using vue-cli

1. Navigate to your working directory, open a terminal (the new project will be under your working directory)
2. Global installed vue-cli

   npm install vue-cli -g

    

3. View version

   vue -V

   

    

4. Based webpack hello to build a name for the project vue

   vue init webpack hello

    

5. Prompted

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

    

6. Installation @ vue / cli-init

   npm i -g @vue/cli-init

    

7. Continue ongoing projects

   vue init webpack hello

8. Prompted

   Project Name: To create a project name (carriage return)

   Project Description: Project (Enter)

   Author: Author

   Next to directly enter

   Install vue-router: Routing component is installed vue, to do the project, then we must install (y)

   Use ESLint to lint your code: the need to use ESLint code detection module (y)

   Set up unit tests: the need for automated unit testing (y)

   Pick a test runner :( carriage return)

   Setup e2e tests with Nightwatch ?: whether to install the end of the test (y)

   Should we run `npm install` for you after the project has been created (recommended):? In the subsequent installation package is dependent on whether npm install install (yes, Enter)

9. carry out
   

    

    

10. Project Directory

    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>样式部分