三、创建脚手架和脚手架分析

news/2024/7/10 1:52:34 标签: vue, node.js, 前端, 前端框架, javascript

三、创建脚手架

一、环境准备

1、安装node.js

  • **下载地址：**https://nodejs.org/zh-cn/
  • 界面展示

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2、检查node.js版本

  • 查看版本的两种方式

    • node -v
    • node -version

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    • 出现版本号则说明安装成功（最新的以官网为准）

3、为了提高我们的效率，可以使用淘宝的镜像源

  • 输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装npm镜像源
  • 以后再用到npm的地方直接用cnpm来代替就好了，因为没有镜像源的话，安装速度比较慢

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 检查是否安装成功：cnpm -v

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

vue_37">二、搭建vue环境

vuecli_39">1、全局安装vue-cli

  • 这里注意：安装vue-cli对node.js的版本是有要求的

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 装的两种方式：输入cmd命令

    • npm install -g @vue/cli 这个是从国外下载的比较慢
    • cnpm install -g @vue/cli 这个是从镜像源下载

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 查看安装的版本（显示版本号说明安装成功）

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 如果你原来有版本或者版本比较低，可以升级
    • npm update -g @vue/cli
    • yarn global upgrade --latest @vue/cli

vue_65">三、创建vue项目

1、用cmd命令创建项

1.1 创建文件
  • 以管理员身份打开命令行界面，进入任意一个想要创建项目的文件夹
  • 输入：vue create vue01

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.2选择配置信息
  • 通过上下方向键选择对应配置，然后回车

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.3 创建成功
  • Successfully created project vue_bailuo_02出现这个说明创建成功

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.4运行
  • cd到项目文件夹下面
  • cd vue_bailuo_02

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 输入代码运行文件
  • npm run serve

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.5 启动
  • 在浏览器输入对应的网址就可以看到界面啦
  • http://localhost:8080/

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.6 停止服务
  • 两下Ctrl+C 或者Ctrl+C一下然后Y

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4、脚手架解构分析

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.1 最开始根目录下的文件

4.1.1 .gitignore 文件

  • 是git 的忽略文件
  • 哪些文件或文件夹不想接受git的管理,你在这配好,关掉,结束

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.1.2 babel.config.js 文件（重要）

  • 重要归重要,不需要我们在里面写东西;babel控制文件你得告诉配置一下怎么转换，采用什么样的标准

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 直接用官方写好的，但是有些人比较好奇，可以参考babel中文官网文档

4.1.3 package.json

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 只要你打开的工程是一个符合npm规范的，那么一定会有包的说明数(package.json)
  • name:名字
  • version:版本
  • dependencies:采用的依赖
  • "core-js": "^3.8.3","vue": "^2.6.14":里面用了哪些库

常用的一些命令

  • 我们执行npm run serve其实是执行了vue-cli-service serve
"serve": "vue-cli-service serve":是属于我们在开发的过程中你去使用这个命令让人家帮你配置好一个服务器,帮你把东西都弄好了
"build": "vue-cli-service build":属于是我的代码写完了,我的功能开发完了,人家后端找我要东西;你得给人家的是.html、.css、.js,所以build是构建的意思;所有的功能都写完了最终想把整个工程变成一个浏览器能够认识的东西,那你执行这个(也就是最后一次编译)
"lint": "vue-cli-service lint":几乎不用。如果你执行了这个lint那就是把整个代码里面写过的js、vue文件全都进行一次语法检查,告诉你哪写的不对，哪写的不太好。因为插件里面有更好的检查;语法检查肯定要检查，但是要有个度。所以不太用

4.1.4 package-lock.json

  • 这个是包版本控制文件:你用到了一个包,这里记录着包的版本信息(version)，记录着下载地址信息(resolved)
  • 等你以后再安装这个东西的时候它能保证最快的速度给你安装到指定版本,如果没有这个lock文件版本就锁不住了:如果你又下载一个文件的时候很有可能帮你下载一个8.x.xx,一般我们这个文件就留着

4.1.5 READMI.md

  • 对整个工程进行一个说明、描述

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.2 src

  • 执行了npm run serve之后,它首先是找到哪个文件开始运行，然后一点一点摸排清楚

    里面有俩个文件夹和俩个文件

4.2.1 App.Vue文件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 看一下App的结构(<template></template>):
vue"><template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

vue"> <img alt="Vue logo" src="./assets/logo.png">:引入外部的图片(当前目录下assets的logo.png文件)
 <HelloWorld msg="Welcome to Your Vue.js App"/>:引入一个HelloWorld

vue"><script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

vue"><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>

4.2.2 main.js文件

  • src中有个特别重要的人,叫main.js,重要到当你执行完npm run serve命令之后,直接去运行main.js

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.2.3 assets文件夹

  • 这个文件夹名称经常在前端的项目里面出现,这个文件夹一般放静态资源；一般放图片视频等

4.2.4 components文件夹

  • 叫组件们；所有程序员写得组件都往里面放,唯独App.vue
  • 从npm run serve开始
npm run serve -> main.js -> App.vue -> 组件们 -放到了-> index.html

4.3 public文件夹

4.3.1 favicon.ico

网站得页签图标

4.3.2 index.html(非常重要)

它是我们整个应用的界面

vue"><!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>


<meta http-equiv="X-UA-Compatible" content="IE=edge">:针对IE浏览器的特殊配置,含义是让这个IE浏览器以最高的渲染级别渲染页面

<meta name="viewport" content="width=device-width,initial-scale=1.0">:开启移动端的理想视口

<link rel="icon" href="<%= BASE_URL %>favicon.ico">:你的项目开发完了，部署到服务器上的时候容易产生一个奇奇怪怪的路径错误,脚手架是这么说的:你在这个html里面如果想引入文件,你别'./','../','/'都不要写了就写<%= BASE_URL %>
<%= BASE_URL %>:指的就是public所在的路径,这个就代表了以前的'./'了,底层是有处理的

<title><%= htmlWebpackPlugin.options.title %></title>:配置网页标题
<%= htmlWebpackPlugin.options.title %>:就是默默来到package.json当中,去找name。这是webpack里面的一个插件完成的功能,你只要这么写那就会去package.json中去找

<noscript></noscript>:如果你的浏览器不支持js那么'<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>'就会出现到页面上

其他都可以删，唯独容器的<div>不能删

4.4 vue.config.js

使用 vue-cli 3.x 以上的脚手架创建的 vue 项目不再有 build文件夹，若需要进行相关配置，需在项目目录下新建文件 vue.config.js

4.4.1 常用的配置

// 后端服务器地址
let url = 'http://localhost:8888'
module.exports = {
    lintOnSave: false, //设置是否启动语法检查
    publicPath: './',  // 【必要】静态文件使用相对路径
    outputDir: "./dist", //打包后的文件夹名字及路径
    devServer: {  // 开发环境跨域情况的代理配置
               proxy: {
            // 【必要】访问自己搭建的后端服务器
            '/api': {
                target: url,
                changOrigin: true,
                ws: true,
                secure: false,
                pathRewrite: {
                    '^/api': '/'
                }
            },
            // 【范例】访问百度地图的API
            // vue文件中使用方法  this.$http.get("/baiduMapAPI/place/v2/search"
            // 最终实际访问的接口为  http://api.map.baidu.com/place/v2/search
            // 遇到以/baiduMapAPI开头的接口便使用此代理
            '/baiduMapAPI': {
                // 实际访问的服务器地址
                target: 'http://api.map.baidu.com',
                //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端和服务端进行数据的交互就不会有跨域问题
                changOrigin: true,
                ws: true,  // 是否启用websockets
                secure: false, // 使用的是http协议则设置为false，https协议则设置为true
                // 将接口中的/baiduMapAPI去掉（必要）
                pathRewrite: {
                    '^/baiduMapAPI': ''
                }
            },
        }
    }
}

http://www.niftyadmin.cn/n/5385638.html

相关文章

ELK入门(三)-Kibana

ELK入门(三)-Kibana

Kibana Kibana是一个开源的分析与可视化平台&#xff0c;设计出来用于和Elasticsearch一起使用的。你可以用kibana搜索、查看存放在Elasticsearch中的数据。Kibana与Elasticsearch的交互方式是各种不同的图表、表格、地图等&#xff0c;直观的展示数据&#xff0c;从而达到高级…
阅读更多...
CSS 函数详解url、min、rgb、blur、scale、rotate、translate等

CSS 函数详解url、min、rgb、blur、scale、rotate、translate等

随着技术的不断进步&#xff0c;CSS 已经从简单的样式表发展成为拥有众多内置函数的强大工具。这些函数不仅增强了开发者的设计能力&#xff0c;还使得样式应用更加动态、灵活和响应式。本文将深入探讨 CSS 常见的 66 个函数&#xff0c;逐一剖析它们的功能和用法&#xff0c;一…
阅读更多...
LInux-信号1

LInux-信号1

文章目录 前言一、信号是什么&#xff1f;二、学习步骤使用kill -l命令查看信号列表可以看到有那么多信号&#xff0c;那么进程是如何识别这么多信号的呢&#xff1f; 使用kill命令终止进程信号的捕捉kill函数raise函数abort函数 Core dump如何查看自己的核心转储功能是否被打开…
阅读更多...
Top-N 泛型工具类

Top-N 泛型工具类

一、代码实现 public class TopNUtil<E extends Comparable<E>> {private final PriorityQueue<E> priorityQueue;private final int n;/*** 构造 Top-N*/public TopNUtil(int size) {if (size < 0) {throw new IllegalArgumentException("Top-N si…
阅读更多...
相机图像质量研究(23)常见问题总结：CMOS期间对成像的影响--紫晕

相机图像质量研究(23)常见问题总结：CMOS期间对成像的影响--紫晕

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…
阅读更多...
人工智能|深度学习——基于数字图像处理和深度学习的车牌定位

人工智能|深度学习——基于数字图像处理和深度学习的车牌定位

1.研究背景及研究目的和意义 车牌识别Vehicle License Plate Recognition VLPR) 是从一张或一系列数字图片中自动定位车牌区域并提取车牌信息的图像识别技术。车牌识别 以数字图像处理、模式识别、计算机视觉等技术为基础&#xff0c;是现代智能交通系统的重要组成部分&#xf…
阅读更多...
学习JAVA的第二天（基础）

学习JAVA的第二天（基础）

目录 基本概念 关键字 class关键字 字面量 练习 变量 定义格式 变量使用 数据类型 基本数据类型 标识符 命名规则 键盘录入 1.导包 2.创建对象 3.接受数据 运算符 算术运算符 练习 隐式转换&#xff08;自动类型提升&#xff09; 强制转换 自增自减运算符 …
阅读更多...
hadoop FileSystem是否要close

hadoop FileSystem是否要close

先来说结论&#xff0c;最好不要close&#xff0c;让hadoop自己close&#xff0c;否则容易把进程里其他获取fs的地方一起关了。这是因为 FileSystem.get(Configuration)做了缓存的原因。当然可以设置 conf.setBoolean("fs.hdfs.impl.disable.cache", true); 就不缓存…
阅读更多...
最新文章

Copyright @ 2022~2023