Vue-cli的安装与使用
一、基本环境搭建
首先需要安装两个应用:
1.NodeJS
2.npm
在NodeJS安装完成后,npm也就会随带这有了。可以使用cmd命令查看是否安装成功:
NodeJS安装成功之后,接下来安装vue的脚手架工具:
npm install -g vue-cli # 只需要第一次安装时执行
vue init webpack '项目名称' # 使用webpack模板创建一个vue项目
cd '项目名称' #进入到项目目录中
npm install # 下载依赖(如果在项目创建的最后一步选择了自动执行npm install,则该步骤可以省略)
npm run dev # 启动项目
vue-cli安装完成后,创建第一个vue项目:
因为在创建项目时,没有选择npm install,所以需要手动去执行一下命令(如果选择Yes,这里的操作可以跳过):
执行完成后,刚创建的项目中就会自动生成一个node_modules文件夹,这个文件夹中包含了项目运行所需的依赖:
二、Vue-cli脚手架项目结构
-
这里使用了webStorm打开了vue-cli项目,项目结构图如下:
-
build 文件夹,用来存放项目构建脚本
-
config 中存放项目的一些基本配置信息,最常用的就是端口转发
-
node_modules这个目录存放的是项目的所有依赖,即 npm install 命令下载下来的文件
-
src这个目录下存放项目的源码,即开发者写的代码放在这里
-
static 用来存放静态资源
-
index.html则是项目的首页,入口页,也是整个项目唯一的HTML页面
-
package.json 中定义了项目的所有依赖,包括开发时依赖和发布时依赖
-
src下的目录:
- assets 目录用来存放资产文件
- components 目录用来存放组件(一些可复用,非独立的页面),当然开发者也可以在 components 中直接创建完整页面。
- 推荐在 components 中存放组件,另外单独新建一个 page 文件夹,专门用来放完整页面。
- router 目录中,存放了路由的js文件
- App.vue 是一个Vue组件,也是项目的第一个Vue组件
- main.js相当于Java中的main方法,是整个项目的入口js
三、启动运行Vue
- 方式一:使用npm run dev在Terminal中启动运行
npm run dev
- 方式二:配置webStorm-npm命令,用webStorm启动运行
- 配置webstorm-npm命令
- 运行成功: