第一个 vue-cli 项目

一、什么是 vue-cli

        vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;预先定义好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;

1.1 主要的功能

        a、统一的目录结构

        b、本地调试

        c、热部署

        d、单元测试

        e、集成打包上线

1.2 需要安装的环境

1.2.1 安装 node.js

        官网地址在这,一步一步的安装就行了。

        在 cmd 下输入 node -v,查看是否可以正确打印出版本号即可,

        在 cmd 下输入 npm -v,查看是否可以正确打印出版本号即可,这个 npm 就是一个软件包管理管理工具,就和 linux 下的 apt 软件安装差不多。

1.2.2 安装镜像加速器

        需要安装 node.js 的淘宝镜像加速器 cnpm,这样子的话,下载会快很多,需要使用管理员权限启动 cmd 的命令窗口,否则有时会下载不成功。

# -g 就是全局安装
npm install cnpm -g

        由于刚才是全局安装的,安装完成之后可以在下面的目录下看到安装的东西,有些文如下所示:

 1.2.3 安装 vue-cli

cnpm install vue-cli -g# 测试是否安装成功
# 查看可以基于哪些模板创建 vue 应用程序,通常我们选择 webpack
vue list

二、第一个 vue-cli 应用程序

2.1 创建 myvue 项目

        1、我们新创建一个文件夹 vue

        2、创建一个基于 webpack 模板的 vue 应用程序

# 1、切换到刚才创建的 vue 目录下# 2、执行下面的命令这里的 myvue 是项目名称,可以根据自己的需求起名
vue init webpack myvue# 3、一路都选择no即可;
Project name:项目名称,默认 回车 即可Project description:项目描述,默认 回车 即可Author:项目作者,默认 回车 即可Install vue-router:是否安装 vue-router,选择 n 不安装(后期需要再手动添加)Use ESLint to lint your code:是否使用 ESLint 做代码检查,选择 n 不安装(后期需要再手动添加)Set up unit tests:单元测试相关,选择 n 不安装(后期需要再手动添加)Setup e2e tests with Nightwatch:单元测试相关,选择 n 不安装(后期需要再手动添加)Should we run npm install for you after the project has been created:创建完成后直接初始化,选择 n,我们手动执行;运行结果!

        3、切换到我们刚才创建的 myvue 的目录下,执行以下的命令

cd myvue# 安装这个项目的所有依赖环境
npm install# 启动项目
npm run dev

        执行结束后,多了很多的依赖

        安装并运行成功后在浏览器输入 http://localhost:8080

        效果如下:

2.2 vue-cli 的目录结构

2.2.1 项目整体目录

        使用 idea 打开我们刚才创建的 myvue 项目,项目所展示的目录结构如下:

        1、build 和 config:WebPack 配置文件

        2、node_modules:用于存放 npm install 安装的依赖文件

        3、src: 项目源码目录

        4、static:静态资源文件

        5、.babelrc:Babel 配置文件,主要作用是将 ES6 转换为 ES5

        6、.editorconfig:编辑器配置

        7、eslintignore:需要忽略的语法检查配置文件

        8、.gitignore:git 忽略的配置文件

        9、.postcssrc.js:css 相关配置文件,其中内部的 module.exports 是 NodeJS 模块化语法

        10、index.html:首页,仅作为模板页,实际开发时不使用

        11、package.json:项目的配置文件

                11-1、name:项目名称

                11-2、version:项目版本

                11-3、description:项目描述

                11-4、author:项目作者

                11-5、scripts:封装常用命令

                11-6、dependencies:生产环境依赖

                11-7、devDependencies:开发环境依赖 

2.2.2 src 目录

        src 目录是项目的源码目录,所有代码都会写在这里。

2.2.3 main.js

        项目的入口文件,我们知道所以的程序都会有一个入口,类似于 java 的 main。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',components: { App },template: '<App/>'
})

        1、import Vue from 'vue' :ES6 写法,会被转换成 require("vue");(require 是 NodeJS 提供的模块加载器)

        2、import App from './App' :意思同上,但是指定了查找路径 ./ 为当前目录

        3、Vue.config.productionTip = false :关闭浏览器控制台关于环境的相关提示

        4、new Vue({...}) :实例化 Vue

        5、el: '#app' :查找 index.html 中 id 为 app 的元素

        6、template: '' :模板,会将 index.html 中替换为 components: { App } :引入组件,使用的是 import App from './App' 定义的 App 组件

2.2.4 App.vue

<template><div id="app"><img src="./assets/logo.png"><HelloWorld/></div>
</template><script>
import HelloWorld from './components/HelloWorld'export default {name: 'App',components: {HelloWorld}
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

        1、template:HTML 代码模板,会替换 < App /> 中的内容

        2、import HelloWorld from './components/HelloWorld':引入 HelloWorld 组件用于替换 template中的 < HelloWorld/>

        3、export default{...}:导出 NodeJS 对象,作用是可以通过 import 关键字导入

                3-1、name: 'App':定义组件的名称

                3-2、components: { HelloWorld }:定义子组件

        4、helloVue 中,关于 < style scoped> 的说明:CSS 样式仅在当前组件有效,声明了样式的作用域,是当前的界面私有的。

三、安装 Webpack

        webpack 是一款模块加载器兼打包工具,他能把各种资源,如:JSJSXES6SASS

LESS、图片等都作为模块来处理和使用。

 3.1 安装

npm install webpack -gnpm install webpack-cli -g

        测试是否安装成功:

npm webpack -vnpm webpack-cli -v

3.2 使用 webpack

        1、创建项目 webpack-study,空的就可以

        2、在项目中创建一个moudles 的目录,用于存放 js 模块等静态资源

        3 、moudles 下创建模块文件,如 hello.js,用于编写 JS 模块相关代码

// 暴露一个方法
exports.sayHi = function (){document.write("<h1>我长的快</h1>");
};

        4、modules 下创建一个名为 main.js 的入口文件,用于打包时设置 entry 属性

var hello = require("./hello");
hello.sayHi();

        5、在项目目录下创建 webpack.config.js 配置文件,使用 webpack 命令打包

module.exports={entry:'./modules/main.js',output:{filename:'./js/bundle.js'}
}

        6、在控制台运行 webpack 命令,会生成一个 dist 文件夹,里面就会有生成的 bundle.js 文件。

        7、在项目目录下创建 HTML 页面,如 index.html,导入 webpack 打包后的 js 文件 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>

        8、此时整个目录的文件结构如下所示:

        9、运行 html 看效果

3.3 说明

        可以在执行 webpack 命令的时候添加 watch 参数,用于实时监听变化,但是一般不这么用

webpack --watch

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/19906.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Maven【入门笔记】

Maven 解决版本依赖的问题 https://www.liaoxuefeng.com/wiki/1252599548343744/1309301146648610 如果没有项目管理工具&#xff0c;在开发项目的时候&#xff0c;我们需要手动管理依赖包&#xff0c;需要管理依赖包的版本、去找到并下载依赖包、还有依赖包所依赖的包 等等。…

百度与AI:历史、投资和监管

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 百度的人工智能在中国具有先发优势 随着ChatGPT的爆火&#xff0c;人工智能重新引起了投资者的注意&#xff0c;然而人工智能并不是突然爆火的&#xff0c;而是全球众多公司在人工智能技术上进行数十年如一日的研发和积累&a…

解决新版 Idea 中 SpringBoot 热部署不生效

标题 依赖中添加 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <opt…

项目管理中的需求分析:实施策略与最佳实践

引言 在项目管理的过程中&#xff0c;需求分析起着至关重要的作用。理解和定义项目需求是项目成功的关键一步&#xff0c;它可以帮助我们确定项目的目标和范围&#xff0c;以及如何有效地达到这些目标。在本文中&#xff0c;我们将深入探讨需求分析的重要性&#xff0c;讨论如…

rar压缩包怎么改成zip格式

不知道大家有没有遇到需要转换压缩包格式的问题&#xff0c;今天想和大家分享rar压缩包改成zip格式的方法。 方法一&#xff1a; 直接修改rar压缩包的后缀名变为zip&#xff0c;就可以修改压缩包文件格式了 方法二&#xff1a; 先将rar压缩包解压出来&#xff0c;然后再将解…

【Spring】bean的生命周期

1.具体的生命周期过程 bean对象创建&#xff08;调用无参构造器&#xff09; 给bean对象设置属性 bean对象初始化之前操作&#xff08;由bean的后置处理器负责&#xff09; bean对象初始化&#xff08;需在配置bean时指定初始化方法&#xff09; bean对象初始化之后操作&am…

数字IC验证高频面试问题整理附答案(二)

近日后台有同学私信还想要验证的面试题目&#xff0c;这不就来了~ Q16.权重约束中”:”和”: /”的区别 : 操作符表示值范围内的每一个值的权重是相同的,比如[1:3]:40,表示1&#xff0c;2&#xff0c;3取到的概率为40/120&#xff1b; :&#xff0f;操作符表示权重要平均分到…

点击编辑变完成

<template><div><button click"dialogshowtrue">添加部门</button><div>部门列表</div><el-table ref"multipleTable" :data"form" tooltip-effect"dark" style"width: 100%">&l…

无人机管控平台,推动电力巡检管理水平提升

各地区无人机作业水平和管理水平存在参差不齐&#xff0c;电力巡检管理要求与业务发展水平不匹配的问题。同时&#xff0c;巡检数据的存储和管理分散&#xff0c;缺乏有效的整合与共享手段&#xff0c;使得内外业脱节&#xff0c;没有形成统一应用和闭环管理。这就导致巡检数据…

springBoot多数据源使用tdengine(3.0.7.1)+MySQL+mybatisPlus+druid连接池

一、安装部署 1、我这里使用的 3.0.7.1版本&#xff0c;因为我看3.x版本已经发布了一年了&#xff0c;增加了很多新的功能&#xff0c;而且3.x官方推荐&#xff0c;对于2.x的版本&#xff0c;官网都已经推荐进行升级到3.x&#xff0c;所以考虑到项目以后的发展&#xff0c;决定…

K8s影响Pod调度和Deployment

5.应用升级回滚和弹性伸缩

数学学习——最优化问题引入、凸集、凸函数、凸优化、梯度、Jacobi矩阵、Hessian矩阵

文章目录 最优化问题引入凸集凸函数凸优化梯度Jacobi矩阵Hessian矩阵 最优化问题引入 例如&#xff1a;有一根绳子&#xff0c;长度一定的情况下&#xff0c;需要如何围成一个面积最大的图像&#xff1f;这就是一个最优化的问题。就是我们高中数学中最常见的最值问题。 最优化…

【深度学习】Transformer,Self-Attention,Multi-Head Attention

必读文章&#xff1a; https://blog.csdn.net/qq_37541097/article/details/117691873 论文名&#xff1a;Attention Is All You Need 文章目录 1、Self-Attention 自注意力机制2、Multi-Head Attention 1、Self-Attention 自注意力机制 Query&#xff08;Q&#xff09;表示当…

企业服务器中了Locked勒索病毒后怎么办,如何解决问题并提高防范意识

科学技术的发展给我们的生活带来了极大便利&#xff0c;但也为企业带来了安全威胁。近期&#xff0c;我们收到很多企业的求助&#xff0c;企业的服务器中了locked后缀勒索病毒&#xff0c;计算机上的所有文件都被加密&#xff0c;无法被正常调取&#xff0c;严重影响了企业的正…

KepwareEX配置API REST接口

服务端Kepware设置 API允许连接设置 创建通道 请求地址(POST)&#xff1a; https://<主机名_或_ip>:<端口>/config/v1/project/channels 以下示例使用postman工具访问API创建了一个名为Channel1 的通道&#xff0c;其使用在本地主机运行的服务器中的Simulator …

UE5 c++ 的文件操作(记录备忘)

函数库.h // Fill out your copyright notice in the Description page of Project Settings.#pragma once#include "CoreMinimal.h" #include "Kismet/BlueprintFunctionLibrary.h" #include "Microsoft/AllowMicrosoftPlatformTypes.h" #incl…

在 React 中渲染大型数据集的 3 种方法

随着 Web 应用程序变得越来越复杂&#xff0c;我们需要找到有效的方法来优化性能和渲染大型数据集。在 React 应用程序中处理大型数据集时&#xff0c;一次呈现所有数据可能会导致性能不佳和加载时间变慢。 虚拟化是一种通过一次仅呈现数据集的一部分来解决此问题的技术&#…

1. C++面向过程

一、C简介 1.1 C的产生及其特点 从C语言发展演变而来&#xff0c;解决了C语言中存在的一些问题&#xff0c;并增加了对面向对象程序设计方法的支持 与其他高级语言相比&#xff0c;C语言可以直接访问物理地址&#xff1b;与汇编相比它具有良好的可读性和可移植性 C于1980年由…

【MySQL】使用C/C++连接MySQL数据库

【MySQL】使用C/C连接MySQL数据库 验证使用select特殊点 本文目的&#xff1a;使用MySQL提供的CAPI完成对数据库的操作 验证 #include <iostream> #include <mysql/mysql.h>int main() {std::cout<<"mysql cilent version: "<<mysql_get_cl…

uniapp h5支付宝支付后端返回Form表单,前端如何处理

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言1.调取接口拿到后端返回的form表单 前言 uniapp h5 支付宝支付&#xff0c;后端返回一串form表单&#xff0c;前端如何拿到支付串并且调用支付 1.调取接口拿到…