安装vue cli_vuecli4.x安装与搭建

1.概述

vue-cli是一个官方发布vue.js项目脚手架，是一个基于Vue.js进行快速开发的完整系统

• 可升级

• 基于webpack构建，并带有合理的默认配置

• 可以通过项目内的配置文件进行配置

• 可以通过插件进行扩展

2.安装

• 安装Node(需要node版本>=8.9)

  下载LTS版本

• 安装vue-cli

npm install @vue-cli -g安装完成之后输入vue –V，如果出现相应的版本号，则说明安装成功

在硬盘上找一个文件夹放工程用的，cd目录路径

3.搭建项目

两种方式

vue create# 图形界面vue ui

创建项目过程

①

②

③

④

⑤

⑥

4.项目目录结构

vue-cli官网：https://cli.vuejs.org/zh/

node_modules：项目初始下载的所有的包，后续如果再通过npm安装的包也会放入这里面

public：入口页面

src：源文件

    assets：静态资源

    components：公共组件(轮播图组件、导航栏组件、购物车组件等等)

    router：路由配置，导入页面的组件

    store：用来写vuex

    views：页面级组件，不是公共组件

    App.vue：页面的主组件，其它组件会被嵌套在主组件里

    main.js：项目开始的地方

.gitignore：git提交项目，忽略的一些文件，如果clone项目后，需要自行下载一些依赖的环境

babel.config.js：可以将ES6转化为ES5代码

package.json：项目的配置文件，类似于maven中的pom.xml(包含配置了启动项目的信息，npm run serve)

"scripts": {    // 启动项目    "serve": "vue-cli-service serve",    // 项目发布，生成dist文件    "build": "vue-cli-service build",    "lint": "vue-cli-service lint"}

package-lock.json：与package.json类似，也是项目的配置文件