一、背景

最近因公司App项目需求量比较少，App团队基本都在内部转型，也算是对大家最好的一种改变方式；目前本人也在学习相关的H5开发，针对JS以前也有不同层度的了解，也写过许多的Html页面（都是十年前的事了），重新学习起Vue相关的开发还算是比较顺畅，只是针对一些细节方面的东西做一些处理与了解基本上可以直接上项目写需求；在周末期间一直想自已如何来搭建一个基础的H5项目？在这搭建的路上还是有些困惑，所以写一篇记录一下遇上的坑。

二、配置Vue环境

一直从事客户端开发的我，没有PC机，只能MAC电脑，所以后面的所有配置都是Mac电服相关的操作。 当我们学习一门新的语言前提，第一件事就是安装相关的运行环境，我们在这里首先配置的npm相关的运行环境，npm自node.js v0.6.x版以后就内嵌在node.js中，所以安装node.js就可以了。配置如下：
1、去官网下载MacOs的node.js的安装包
2、安装相关下载好的node.js的安装包，和普通软件一样，一步一步安装即可，安装完成查看是否成功

npm -v

3、npm安装完成后，可以安装其他工具

• 安装webpack打包工具，参数-g表示全局安装
• 安装vue-cli脚手架，用于初始化vue项目，查看是否安装成功

npm i -g vue;npm i -g @vue/cli
vue -V

4、项目创建，目前下载的与安装的版本都是最新的，创建vue 3.0的项目直接选择3.0或者默认

vue create project-name

如果要创建vue 2.*的项目需要使用，在选择的时候，选择vue2.x创建

npm install -g @vue/cli

vue create project-name

5、安装开发工具，现在目前主要采用VSCode开发工具，直接上地址下载

三、项目插件安装及用例

在项目开发过程中，需要使用一些组件是必不可少的，首先通过命令行进入到vue项目中，如：

cd  ~/Desktop/Vue/vue-demo

再安装最基础的两个插件：vue-roter 在这里就拿这vue-router做栗子，如下：
1、安装vue-roter

yarn add vue-router

如果使用vue2.x安装vue-router，则需要使用下面这个命令

npm install vue-router@3.2.0

2、vue-roter实例
新建router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
Vue.use(VueRouter)
 
const routes = [
    {
        path: '/', 
        name: 'Home', 
        component: Home
    },
    //路由的懒加载
    {
        path: '/about', 
        name: 'About', 
        component: () => import( './views/About.vue')
    },
    {
      //重定向，项目一跑起来就进入首页
      path: '/*',
      redirect: '/Home'
    }
]
 
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})
 
export default router

修改main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
 
Vue.config.productionTip = false
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

修改App.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">去Home组件</router-link> |
      <router-link to="/about">去About组件</router-link>
    </nav>
    <router-view/>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      radio: '1'
    };
  }
}
 
</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>

新建views/Home.vue

<template>
  <div id="app">
    Home
  </div>
</template>
 
<script>
export default {
  name: "Home"
}
</script>
 
<style>
 
</style>

新建views/About.vue

<template>
  <div id="app">
    About
  </div>
</template>
 
<script>
export default {
  name: "About"
}
</script>
 
<style>
 
</style>

四、项目结构图

base-demo.png