Vue学习笔记（七）vue-cli

vue-cli

Vue CLI是用于快速Vue.js开发的完整系统，它提供：

• 通过交互式项目脚手架@vue/cli。
• 通过@vue/cli+ 零配置快速原型@vue/cli-service-global。
• 运行时依赖项（@vue/cli-service）：
  • 可升级
  • 建立在webpack之上，具有合理的默认值；
  • 可通过项目内配置文件进行配置；
  • 可通过插件扩展
• 丰富的官方插件集合，集成了前端生态系统中的最佳工具。
• 完整的图形用户界面，用于创建和管理Vue.js项目。

vue-cli的环境配置

vue官网有详细说明。前往查看

使用一下命令行进行vue-cli的下载和环境配置：

//安装
npm install --global vue-cli

//创建项目
vue init webpack + "项目名称"

//然后进入项目文件夹
cd + "项目名称"

//最后安装依赖
npm run dev

配置环境时需要的一些选项：

//选择项目名字
? Project name todolist

//项目描述
? Project description

//作者
? Author

//如何构建项目
? Vue build

//是否使用路由
? Install vue-router?

//是否用ESLint规范代码
? Use ESLint to lint your code?

//使用哪种ESLint的语法检测
? Pick an ESLint preset

//是否需要自动化测试工具
? Set up unit tests
? Setup e2e tests with Nightwatch?

//使用哪种形式进行包的安装
? Should we run `npm install` for you after the project has been created? (recommended)

vue-cli的文件夹介绍

bulid:项目的webpack配置文件

config:开发环境和线上环境的一些配置文件

node_modules:项目的依赖

src:源代码

src/main.js:整个项目入口文件

static:静态资源

index.html:整个网页最外层的HTML文件

单文件组件介绍

是一种vue-cli中的新语法.

一个vue文件中包含了一个组件所需的所有基本内容.(模板,逻辑,样式)

一点自己的小记录...

关闭的方法:Ctrl+c

还可以:在cmd中输入netstat -ano查询占用端口号的pid

然后去任务管理器强制关闭任务.