vue-cli
vue-cli 是 vue 提供的一个用于自动化构建和开发项目的工具,也称为:脚手架,它是一系列工具的集合,它主要有:
- 根据配置选项自动构建项目,并安装所需要的依赖
- 启动一个本地开发服务器,通过这个服务器可以基于服务器环境访问本地项目,同时提供了跨域代理服务
- 项目的自动编译、打包
- 项目测试(单元测试、e2e测试)
安装
前提:安装npm
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装成功以后,会提供一个 vue
的命令
查看版本
vue --version
# OR
vue -V
帮助
vue --help
# OR
vue -h
创建项目
vue-cli 提供了两种方式来创建项目
- 命令行 - cli
- 图形界面(基于浏览器) - ui
命令行方式创建项目
vue create 项目名称
基于浏览器图形界面方式创建项目
vue ui
进入当前目录
cd 目录名称
运行
项目创建成功以后,进入项目根目录,打开 package.json 文件,我们可以看到
{
...,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
...
}
https://cli.vuejs.org/zh/guide/cli-service.html#%E4%BD%BF%E7%94%A8%E5%91%BD%E4%BB%A4
打包
打包的具体命令,我们在后期项目开发完成以后再说
项目目录结构文件说明
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y8fpzrwV-1588761039175)(./assets/vue-directory.png)]
src
先来说一个最重要的目录 src ,这个就是存放的就是我们项目源码的目录,我们开发过程中大部分的时间就在这个目录中
- main.js
项目的入口文件
- App.vue
首先,这是 vue 提供的一种单文件组件的文件模式(后续会讲),一个 .vue 文件就是一个独立的组件,这里的 App.vue 是应用的根组件
- components 目录
存放组件的目录
- assets 目录
存放静态资源的目录,比如:图片,css 等。这里的文件与外层 public 目录存放的静态资源的最大区别是:assets 存放的资源是通过 import 等方式作为模块导入,最后打包处理的。而 public 中的资源并不通过模块方式导入,一般都是通过 script 、link 、img 等方式从浏览器引入的资源,比如无法通过模块化处理的 js 文件(这样的需求情况并不多)
public
一些并非通过模块方式引入的资源文件存放的位置,一般都是通过 script 、link 、img 等方式从浏览器引入的资源,比如无法通过模块化处理的 js 文件(这样的需求情况并不多)