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>