基于Vue的前端项目初始化

因为每次创建项目或者保存的时候，都需要去再查阅相关的学习视频以及资料，因此将前端项目初始化的整个流程记录下来，以供后续方便查阅。

Vue环境搭建

1、NodeJS环境搭建

因为在前端的开发中，我们需要经常的使用到NPM，NPM 全称Node Package Manager，它是JavaScript的包管理工具，并且是Node.js平台的默认包管理工具，最新版本的Node.js已经集成了npm工具，所以必须首先在本机安装Node环境。（不需要了解整个Node的生态，这里主要是为了使用NPM）
1）到官网（Node.js）下载安装包，这里我们选择左侧的稳定版本；
2）双击安装包进行安装；
3）在命令行通过“npm-v”来测试是否安装成功。

2、Vue环境搭建

通过上面我们安装好的node.js，就安装了npm。然后，再利用npm安装淘宝镜像的cnpm。
打开cmd，输入命令：
npm install -g cnpm --registry=http://registry.npm.taobao.org
cnpm install cnpm -g
cnpm install -g @vue/cli

3、Vue的demo创建

在命令行通过“vue create vue_first_demo”来创建第一个vue示例程序；
选择一个文件夹，通过Shift+鼠标右键打开当前文件夹的Powershell，输入命令，之后cd到我们的项目根目录。

在项目根目录通过“npm run serve”启动创建的示例程序；
在浏览器通过地址“localhost:8080”来测试访问，出现如下界面说明创建成功。

接下来我们通过命令行的方式手动的配置下插件和依赖：

1、配置Element UI和修改界面
1）在命令行中输入“npm install element-ui --save-dev”等待安装结束，在vs code中打开我们创建的这个vue_first_demo 这个文件夹，在package.json中，我们就可以看到element-ui以及它的版本号。

2）在src目录下，找到main.js这个文件，引入我们的element-ui以及他的样式库。

3）修改默认界面

将原本的helloworld组件删掉，给template添加两个div，一个头部区域systemHeader，在div里再创建一个span，一个内容区域systemContent，并添加背景图片，同时对div的样式进行设置。

<template>
  <div id="app">
    <div class='systemHeader'>
      <span>头部区域</span>
    </div>
    <div class='systemContent'>
      <img :src="testimgurl"/>
    </div>
  </div>
</template>

<script>
import imgurl from './assets/nalian.jpg'

export default {
   
  name: 'App',
  data:function(){
   
    return{
   
      testimgurl:imgurl
    }
  },
  components: {
   
    
  }
}
</script>

<style>
body{
   
  margin