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

最新推荐文章于 2024-11-07 16:50:45 发布

落败.

最新推荐文章于 2024-11-07 16:50:45 发布

阅读量2k

点赞数 34

分类专栏： Vue 文章标签： vue node.js 前端前端框架 javascript

本文链接：https://blog.csdn.net/m0_72166275/article/details/136221284

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Windows系统中安装Node.js和配置淘宝镜像源，以及如何使用vue-cli搭建Vue项目，包括全局安装、创建项目、配置文件结构、常用命令和脚手架的解构分析。重点讲解了package.json、Babel.config.js和vue.config.js的作用。

摘要由CSDN通过智能技术生成

三、创建脚手架

一、环境准备

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`环境

1、全局安装`vue-cli`

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

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

装的两种方式：输入cmd命令
- npm install -g @vue/cli 这个是从国外下载的比较慢
- cnpm install -g @vue/cli 这个是从镜像源下载
查看安装的版本（显示版本号说明安装成功）
- vue --version

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

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

三、创建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>):

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

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

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

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>

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(非常重要)

它是我们整个应用的界面

<!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': ''
                }
            },
        }
    }
}