B站自己跟进的前端项目

最新推荐文章于 2024-04-07 09:59:47 发布

天高海阔处，望尽天涯路

最新推荐文章于 2024-04-07 09:59:47 发布

阅读量104

点赞数

文章标签：前端 vue.js webpack

本文链接：https://blog.csdn.net/thewordafter/article/details/129033100

版权

该文介绍了如何使用Vue框架搭建前端项目，包括下载Node.js和配置npm镜像，以及安装yarn和VueCLI。通过VueCLI创建项目，并解析了项目的基本结构和package.json文件。此外，文章还演示了ElementUI的快速使用方法，提供了一个简单的HTML示例。

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

0.项目概况

0.1项目介绍

本项目是来自于B站的一个前端项目，运用的是Vue框架。

0.2项目准备工作

作为一个前端小白，在项目开始前需要做一些准备工作。

0.2.1 下载Node.js

Node.js的官网如下：Node.js (nodejs.org)
由于Node.js当中默认配置了npm，所以不需要单独下载npm。在完成下载后，应该要在cmd(命令提示符)界面检查是否成功下载。

node -v //查看电脑中node.js的版本，并输出版本号
npm -v //查看电脑中npm的版本，并输出版本号

0.2.2 配置npm的镜像文件

由于中国大陆连接国外的npm官网会遇到网络问题，所以要配置npm镜像来解决网络问题。这个配置可以在cmd当中进行，代码如下：

npm config get registry //显示当前使用的下载网址
npm config set registry https://registry.npmmirror.com/  //让下载网址变为淘宝镜像

0.2.3 下载yarn

由于中国大陆连接国外的npm官网会遇到网络问题，所以也可以通过下载yarn来简介解决网络问题。yarn与npm都是类似的包管理工具。同样是在cmd中下载，代码如下：

npm i -g yarn //通过yarn来下载yarn
yarn -v //检查yarn是否下载完成，并输出版本号

0.2.4 下载Vue CLI

vue脚手架(CLI)的作用是用来自动一键生成vue+webpack的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦。

npm install -g @vue/cli //下载最新版的Vue CLI
vue --version //查看当前的vue版本号

0.2.5 在cmd中通过VueCLI创建项目

cd [你要创建的前端项目在电脑中的文件夹位置]
vue create my-app //在当前目录创建一个名叫my-app的项目(不允许驼峰命名如myApp)

要在cmd中进行一定的选择。即选择该项目的框架版本(Vue3或者是Vue2)：

完成情况如下图所示：

0.3对前端项目的基本认识

项目包的初始结构如下图所示。根据英文名称示意，已知的相关包的作用有如下几个。assets：资源包，components：组件包。

应当重点关注的其中一个文件为package.json，这是项目的管理文件。其中的部分内容如下：

"scripts": { //scripts英文:脚本
    "serve": "vue-cli-service serve", //项目启动命令，可在cmd处执行
    "build": "vue-cli-service build", //
    "lint": "vue-cli-service lint" //
  },

1.Element UI的使用

ElementUI是一个UI框架(桌面组件库)，网址为Element - 网站快速成型工具。在此处引用一下网站内的快速开始的html代码，可以将其复制到自己项目的index.html文件中快速看效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <!-- 这些http都是网站导入，可以在本地电脑建立文件并复制内容，实现本地文件导入，增加css/js文件的容错率 -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>