原文地址：vue-cli入门

9.vue-cli

9.1.介绍和安装

9.2.快速上手

9.3.项目结构

9.4.单文件组件

9.5.运行

9.vue-cli

9.1.介绍和安装

在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli。使用它能快速的构建一个web工程模板。

官网：https://github.com/vuejs/vue-cli
安装命令：npm install -g vue-cli

9.2.快速上手

我们新建一个module：

切换到该目录：

用vue-cli命令，快速搭建一个webpack的项目：vue init webpack

前面几项都走默认或yes

下面这些我们选no

最后，再选yes，使用 npm安装

开始初始化项目，并安装依赖，可能需要

安装成功！

可以使用npm run dev命令启动。

9.3.项目结构

安装好的项目结构：

入口文件：main.js

9.4.单文件组件

需要注意的是，我们看到有一类后缀名为.vue的文件，我们称为单文件组件

每一个.vue文件，就是一个独立的vue组件。类似于我们刚才写的login.js和register.js

只不过，我们在js中编写 html模板和样式非常的不友好，而且没有语法提示和高亮。

而单文件组件中包含三部分内容：

template：模板，支持html语法高亮和提示
script：js脚本，这里编写的就是vue的组件对象，还可以有data(){}等
style：样式，支持CSS语法高亮和提示

每个组件都有自己独立的html、JS、CSS，互不干扰，真正做到可独立复用。

9.5.运行

看看生成的package.json：

可以看到这引入了非常多的依赖，绝大多数都是开发期依赖，比如大量的加载器。
运行时依赖只有vue和vue-router
脚本有三个：
- dev：使用了webpack-dev-server命令，开发时热部署使用
- start：使用了npm run dev命令，与上面的dev效果完全一样，当脚本名为“start”时，可以省略“run”。
- build：等同于webpack的打包功能，会打包到dist目录下。

我们执行npm run dev 或者 npm start 都可以启动项目：

页面：

Vue—相关工具—vue-cli相关推荐

Vue—相关工具—webpack
原文地址:webpack快速入门目录 8.webpack 8.1.安装 8.2.核心概念 8.3.编写webpack配置 8.3.1.入口entry 8.3.2.出口output 8.4.执行打包 ...
Vue教程-4-Vue CLI快速入门
目录 1.Webpack与脚手架 2.Vue CLI使用 2.1.安装CLI3 3.Vue-CLI2新建项目 4.Vue-CLI2目录结构 4.1.扩展 5.如何关闭ESLint规范? 6.Runti ...
Vue进阶——Vue CLI
Vue进阶--Vue CLI 前言一.什么是Vue CLI? 二.怎么安装Vue CLI? 1.Node 版本要求 2.已安装旧版本 3.安装完成三.Vue CLI 基础运用 1.Vue ui项目 ...
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole）
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明(Eruda.vConsole) 目录 Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明(Eruda.vCons ...
Vue和Vue CLI什么关系？
很多小伙伴搞不清Vue和Vue CLI什么关系,版本号区别,来解惑一下. 今天又有同学在学习我的课程的时候,问到Vue和Vue CLI,它们之间的版本号也搞混了. 没关系,同学们在学习过程中,有什么疑 ...
vuejs和html语言一样么,vue和vue.js有区别吗？
vue和vue.js没有区别,vue就是vue.js的简称.vue是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端三大主流框架! Vue (读音 /vjuː/,类似于 ...
Vue：Vue和ECharts，在Vue上进行可视化处理，在Vue上画图
Vue:Vue和ECharts,在Vue上进行可视化处理,在Vue上画图一.预科知识 Vue CLI ECharts 二.资源在Vue中使用echarts 如何在 Vue 项目中使用 echart ...
Vue 脚手架||Vue 脚手架的基本用法
Vue 脚手架 Vue 脚手架用于快速生成 Vue 项目基础架构,其官网地址为:https://cli.vuejs.org/zh/ npm install -g @vue/cli 检测是否安装成功 ...
VUE系列-Vue中组件的应用(三)
大家好,我是前端岚枫,一枚二线城市的程序媛,上篇主要跟分享了<VUE系列-Vue核心应用(二)>,今天主要跟大家分享我整理的vue的组件相关的,主要包括组件声明.组件种类.组件间的几种 ...
为什么我们放弃了 Vue？Vue 和 React 深度对比
我使用 Vue 和 React 已经很长一段时间了,两个框架上实践代码量都在 10 万行以上.不得不说两者都是很 nice 的,帮助开发者减少很多工作量,这类框架是现代化前端开发必备的.然而 Vue ...

Vue—相关工具—vue-cli

9.vue-cli

9.1.介绍和安装

9.2.快速上手

9.3.项目结构

9.4.单文件组件

9.5.运行

Vue—相关工具—vue-cli相关推荐

最新文章

热门文章