Vue Cli （脚手架）

　　装Vue脚手架前一定要装Node.js 

1.安装Vue脚手架（ 此是Vue cli2）

//如果安装的是3 的vue cli 卸载脚手架
  npm uninstall -g @vue/cli //卸载3.x版本的脚手架
  npm uninstall -g vue/cli //卸载3.x版本的脚手架
// Vue  Cli 官方网站
　　https://cli.vuejs.org/zh/guide/
// 安装 vue Cli  
　npm install -g vue-cli

2. 创建一个Vue cli 项目（到你要创建项目的位置）

vue init webpack 项目名

 

 

 

 

 

 

 创建成功！

 

 项目的目录结构

vueclidemo    -------- 项目名
　　-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 
　　-index.html　　----项目的主页
　　-package.json  ---类似于maven的pom.xml文件  依赖文件
　　-package-lock.json --package加锁文件
　　-README.md

 3.访问项目

 Vue Cli中项目开发方式

　　注意：一切皆组件 一个组件中 js代码 html代码 css样式

　　　　1.VueCli开发方式是在项目中开发一个一个的组件对应一个业务功能模块，多个组件合到一起形成一个前端系统

　　　　2.使用Vue Cli 进行开发时不再书写html，编写的是一个组件（组件后缀.vue结尾的文件），项目打包的时候Vue Cli组件会编译成html文件

 

4.Vue Cli项目打包

　　1.在项目的根路径

npm run build

　　注意：vue脚手架打包的项目必须在服务器上运行不能直接双击运行

　　2.打包之后当前项目中变化

　　　　在打包之后项目中出现dist目录，dist目录就是vue脚手架项目生产目录或者说是直接部署目录