一、配景
迩来因公司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 -v3、npm安装完成后，可以安装其他工具
- 安装webpack打包工具，参数-g体现全局安装
- 安装vue-cli脚手架，用于初始化vue项目，查察是否安装乐成
npm i -g vue;npm i -g @vue/clivue -V4、项目创建，现在下载的与安装的版本都是最新的，创建vue 3.0的项目直接选择3.0或者默认
vue create project-name假如要创建vue 2.*的项目需要使用，在选择的时间，选择vue2.x创建
npm install -g @vue/clivue create project-name5、安装开辟工具，现在现在重要接纳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.02、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 = falsenew 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>四、项目结构图
|
