vue-cli的使用,hello vue-cli

Vue-cli脚手架

1.什么vue-cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)

2.vue-cli的安装

2.1 node.js环境安装

验证nodejs环境是否成功 node -v

2.2npm设置淘宝镜像

npm 管理前端系统依赖 远程仓库(中心仓库)

验证npm npm -v

设置淘宝镜像加速下载

npm config set registry https://registry.npm.taobao.org
验证是否设置成功
npm config get registry

2.3配置npm下载依赖位置

npm config set cache “E:\environment\npm-cache”
npm config set prefix “E:\environment\npm_global”

2.4验证node js环境配置

npm config ls

2.5 全局安装vue脚手架

npm install -g vue-cli

3. 基于脚手架创建一个简单的项目

3.1 选择好目录 输入命令

创建一个hello项目

vue init webpack hello

选择npm打包打包方式
下载完成

3.2 进入项目 启动

cd hello
npm run dev 苹果可以npm start

进入界面

4. 项目分析

hello ------------->项目名
-build ------------->用来使用webpack打包使用build依赖
-config ------------->用来做整个项目配置目录
-node_modules ------>用来管理项目中使用依赖
-src ------>用来书写vue的源代码[重点]
+assets ------>用来存放静态资源 [重点]
components ------>用来书写Vue组件 [重点]
router ------>用来配置项目中路由[重点]
App.vue ------>项目中根组件[重点]
main.js ------>项目中主入口[重点]
-static ------>其它静态
-.babelrc ------> 将es6语法转为es5运行
-.editorconfig ------> 项目编辑配置
-.gitignore ------> git版本控制忽略文件
-.postcssrc.js ------> 源码相关js
-index.html ------> 项目主页
-package.json ------> 类似与pom.xml 依赖管理 jquery 不建议手动修改
-package-lock.json ----> 对package.json加锁
-README.md ----> 项目说明文件