Vue（08）——我的第一个vue-cli程序

Vue（08）——第一个vue-cli程序

1、vue-cli概述

vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板；

vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。

vue-cli主要功能：

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

2、安装vue-cli

1、安装node.js

下载地址

测试是否安装成功：

cmd输入命令：node -v

2、安装Node.js淘宝镜像加速器（cnpm）：cmd输入命令：npm install cnpm -g

3、安装vue-cli：cmd输入命令：cnpm install vue-cli -g

查看可以基于哪些模板创建vue查询：cmd输入命令：vue list

3、用vue-cli来构建项目

用webpack模板创建项目

使用命令行cd进入到vue项目目录并输入：

vue init webpack myvue

myvue是自定义的项目名。

输入命令后，会跳出几个选项让你回答：

• Project name (baoge)： -----项目名称，直接回车，按照括号中默认名字使用（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）
• Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用默认名字
• Author ()： ----作者，输入你的大名
  接下来会让用户选择：
• Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时，已经有推荐了就选择第一个了
• Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，选yes，但作为一个初学者，为了体验手动创建项目的过程，所以选择no，并且下面三个选项都选no
• Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
  接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格
• Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试
• Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试
  

项目创建成功：

初始化并运行

1.输入命令：cd myvue 进入项目

2.安装项目所需的依赖环境：cnpm install

执行完后，发现项目文件夹里多了个node_modules文件夹，里面就是所需要的依赖。

3.启动当前项目，输入命令：npm run dev

访问请求：http://localhost:8080/测试：

成功进入页面，测试完成，如果想结束项目，在cmd窗口按ctrl+c即可！

在idea中打开myvue项目，修改HelloWorld.vue文件中template的内容为<h1>万里顾一程</h1>，再启动程序，访问页面，查看是否修改成功：

到此为止，我们第一个vue-cli程序就安装好了。