vue-cli学习

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