Vue Cli脚手架安装与使用

目录

1.Cli工具安装

        指令

 2.创建脚手架

        vue-cli生成脚手架官网文档传送门：

         创建指令

 3.运行

        指令

4.脚手架文件目录介绍

---

1.Cli工具安装

        指令

                cmd输入:

                npm install -g @vue/cli

                约3-5分钟后

                vue  --version查看版本

 2.创建脚手架

        脚手架:一个项目的目录结构,有了脚手架之后,可以一键帮忙生成项目统一目录结构,我们只需要写页面逻辑, 无须为取名而烦恼

        vue-cli生成脚手架官网文档传送门：

创建一个项目 | Vue CLI🛠️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

         创建指令

                vue create 项目名称

                !!!项目名称不要有中文，也不要有大写字母!!!

创建成功

 

 3.运行

        指令

                项目根目录:  npm run serve  会进入vue欢迎页面

4.脚手架文件目录介绍

vuecil-demo         # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网站首页，vue会帮我们配置好，使用较少)
    ├── src          # 业务文件夹(项目核心文件夹，我们写的项目代码都放在这个文件夹里面)
      ├── assets     # 静态资源（一般项目图片、css都放在这里）
        └── logo.png # vue的logo图片(没啥用,vue打广告的，可删除)
      ├── components # 组件目录一般我们写的组件都放在这里）
        └── HelloWorld.vue # 欢迎页面vue代码文件 （打广告的，可删除）
      ├── App.vue    # 整个应用的根组件（网站首页index.htm默认会渲染这个根组件）
      └── main.js    # 入口js文件（入口文件，vue实例的创建，根组件的挂载都是在这里完成）
    ├── .gitignore   # git提交忽略配置（默认已经帮我们配置好 ）
    ├── babel.config.js  # babel配置（ES6转换ES5工具，一般不用管）
    ├── package.json # 依赖包列表
    ├── README.md    # 项目说明（一般公司代码规范，人员组成之类的可以写在这里）
    └── package-lock.json    # 项目包版本锁定和缓存地址
    └── vue.config.js    # 项目webpack配置项