vue-cli 简单了解及使用

vue-cli是vue官方提供的工具，是辅助项目开发的工具

vue-cli 是一个基于Vue.js进行快速开发的完整系统，也称脚手架工具，帮助我们完成项目构建的工具。使用vue-cli 的好处有：

● 统一项目架构风格

● 初始化配置项目依赖

● 提供单文件组件--vue应用

vue-cli 的使用是通过命令行的方式操作的。

vue-cli 的安装和搭建项目的流程：

● 安装: npm install -g @vue/cli

vue --version 查看安装成功与否及版本

npm update -g @vue/cli 更新包

● 项目搭建:

① 创建项目： vue create project-demo 创建一个以项目名为名称的目录。以下有几点注意下：

◼ 选择预设功能Preset：选择当前项目依赖于哪些工具（babel语法降级工具，eslint语法风格检测工具，手动选择功能-自定义）。

◼ 自定义预设：点击空格选择与取消；回车完成，再选择vue版本，history/hash模式，css预处理器，eslint，最后选择相关配置文件保存在哪里（分开存/pakge.json文件中）,最后给预设起名。

◼ 其中自定义的预设会保存到c盘用户目录下，“ .vuerc文件 ”，再次创建项目时，也会有这个自定义的选项。

◼ 选择包管理器：选择当前项目要安装的包的方式（yarn或npm）。

② 创建完成

③ 运行项目：npm run serve（运行时要处于当前项目的目录下）

◼ vue-cli 的目录与文件:

文件目录:

|__根目录

|——public 预览文件目录

|__src

|———assets 静态资源目录

|___components 项目组件目录

|___App.vue 根组件

|___main.js 入口文件

◼ 单文件组件：将组件的功能统一保存在以.vue为扩展名的文件中,将传统的模板、视图、逻辑三部分保存在一起。

一个vue文件中：

template -- 结构、模板

import 导入组件，再将导入组件添加到当前组件的component中，作为当前组件的子组件；

vue-cli将实例创建的步骤，单独放到了main.js 入口文件中，再实例化；；

④ 项目打包与部署:

◼ 打包：就是将VUE CLI项目编译为浏览器可识别的文件

npm run build

打包完成后生成dist文件夹，文件结构：dist

|——File

|__Size

|__Gziped

注意：dist文件是编译的产物，是不能修改的

◼ 部署：将vue项目中的dist目录部署到服务器上；将文件根据后端提供的路径放入，后端服务器部署处理或将前端的vue项目独立的部署到服务器上，利用ajax和后端进行交互。

本地部署 ———— 静态文件服务器部署：

npm install -g serve 安装静态文件服务器

在dist目录下直接使用serve命令部署 cd dist目录 --> serve / serve dist

vue-cli 简单了解及使用相关推荐

Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole）
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明(Eruda.vConsole) 目录 Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明(Eruda.vCons ...
VSCode 搭建Vue开发环境之Vue CLI
2019独角兽企业重金招聘Python工程师标准>>> 一.简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式 ...
vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
vue 转为静态html,Vue CLI 3使用：HTML和静态资源（五）
HTML public/index.html 文件是一个会被 html-webpack-plugin 处理的模板.构建中,各种资源路径会被注入解析.可以使用 lodash template 语法插入内 ...
七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用（安装，拉取2.x模板，初始化项目），Vue cli2详解，Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
Qt工作笔记-WebEngineView调用web站点中的JS脚本（含Vue Cli脚本）
首先是一个例子,网页结构如下: 代码如下: index.html <html> <meta http-equiv="Content-Type" content=& ...
Vue学习笔记（3）（Vue CLI）
Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili Vue CLI 0. 什么是vue-cli 如果你在开发大型项目, ...
Vue学习笔记(九) Vue CLI
1.简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,它包括三个独立的部分: CLI:一个全局安装的 npm 包,提供在终端里使用的命令 CLI 服务:一个局部安装在使用了 @v ...
cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...

vue-cli 简单了解及使用

vue-cli 简单了解及使用相关推荐

最新文章

热门文章