vue-cli的作用是为我们搭建开发所需要的环境为我们的开发带来便利
1. 安装vue-cli
注意:在安装了ndoe,npm的基础之上安装vue-cli.
在命令提示行(cmd)中输入:
npm install vue-cli -g
检测版本号:
vue -V注意:V为大写的.如果可以出来版本号,即说明安装成功
2. 初始化项目
在命令提示行(cmd)中输入命令:
vue init <template-name> <project-name>
<template-name>:表示模板名称,vue-cli官方为我们提供了5种模板,
webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。
browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。
simple-一个最简单的单页应用模板。
<project-name>:标识项目名称,这个你可以根据自己的项目来起名字。
**在实际开发中,一般会使用webpack这个模板;
接下来按照步骤操作就好, 当出现下图时,就说明初始化成功!
3. Vue-cli项目结构
初始化项目后的目录结构为:
文件讲解:
1.App.vue:页面入口文件(也就相当于是母版页),所有的页面都以该页面为模板.子页面通过<router-view/>来嵌套进来的
2.components文件夹:里面装载的是一些vue文件,它是页面的组件.
3.router/index.js路由文件:作用是引用components里的文件
4. 编译/运行
在终端输入:
npm run dev