IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 大师偷学:vue-cli构建SPA项目和SPA项目结构 -> 正文阅读

[JavaScript知识库]大师偷学:vue-cli构建SPA项目和SPA项目结构

目录

一,vue-cli构建SPA项目

二,SPA项目结构

三、SPA完成路由的开发

四、嵌套路由的使用


一,vue-cli构建SPA项目

? ? ? ? 前提:

想要实现vue-lic构建SPA项目,前提是搭建好nodeJS环境

我们使用两个命令来测试一下:

???node?-v
? ?npm -v

如果出现版本号则表示nodeJS环境搭建好了

? ? ? ? ?1.1什么是Vue-cli?

??vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下:? ? ? ??

??vue init webpack xxx ???????????????????

???注1:xxx?为自己创建项目的名称

???注2:必须先安装vue,vue-cli,webpack,node等一些必要的环境

? ? ? ? ?1.2安装vue-cli

命令:

npm install -g vue-cli

npm install webpack -g

安装完成之后打开命令窗口并输入?vue -V(注意这里是大写的“V”),如果出现相应的版本号,则说明安装成功。然后可以看到我们的目录下出现了一些文件:

? ? ? ? 1.3创建SPA项目?

命令:

vue init webpack spa0911?

此命令用于创建SPA项目,它会在当前目录生成一个以“spa0911”命名的文件夹

?创建成功

? ? ? ? 1.4?使用开发软件HBuilder?x?右键导入项目

二,SPA项目结构

1)在项目的目录层次中打开cmd窗口来启动项目

命令:
npm run dev

2)得到一个访问地址?

3)访问地址:证明SPA项目创建成功!

?注2:vue-cli构建的项目,在控制台npm run dev启动后,默认的调试地址是8080端口的但是大部分时候,我们都要并行几个项目开发,很有可能已经占用了8080端口,所以就涉及到如何去更改调试地址的端口号了

????????config --> index.js??

????????dev: {

??????????// Paths

??????????assetsSubDirectory: 'static',

??????????assetsPublicPath: '/',

??????????proxyTable: {},

??????????host: 'localhost',

??????????port: 8083, ??????//?在这里修改端口号

??????????autoOpenBrowser: false,

??????????errorOverlay: true,

??????????notifyOnErrors: true,

????????},

?项目结构解析

三、SPA完成路由的开发

?spa的访问过程:

1.访问index.html
2.index.html通过main.js中的vue实例管理#app边界,
同时指定App.vue模板
3.App.vue中包含了logo图片以及锚点,而锚点与组件的对应关系存在router/index.js中,所有就指向了一个组件
4.最终App.vue中就显示了logo图片以及hellowrld.vue的内容? ?

?当前后端分离时会启动两个一样的端口号?此时我们需要修改端口

?组件使用流程:

?APP.vue:

<template>
  <div id="app">
   <!-- 事件 -->
   <router-link to="/Home">首页</router-link>
   <router-link to="/About">关于本站</router-link>
   <!-- 锚点 -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>

Home.vue

<template>
  <div>
    这是首页内容,最新内容
  </div>
</template>

<script>
    export default{
      name:"Home",
      data(){
        return {
          msg:'Welcome to Your Vue.js App'
        };
      }
    }
</script>

<style>
</style>

?About.vue:

<template>
  <div>
    吾乃钮祜禄甄强!!!
  </div>
</template>

<script>
    export default{
      name:"About",
      data(){
        return {
          msg:'Welcome to Your Vue.js App'
        };
      }
    }
</script>

<style>
</style>

index.js:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Home',
      name: 'Home',
      component: Home
    },
		{
			path: '/About',
			name: 'About',
			component: About
		}
  ]
})

?

四、嵌套路由的使用

其实嵌套路由就是在index.js中加入一个children的属性以及配置相关的关系
About.vue:

<template>
  <div>
   <!-- 这是关于本站内容 -->
   <router-link to="/AboutMe">关于站长</router-link>
    <router-link to="/AboutWebSeit">关于本站</router-link>
    <!-- 锚点 -->
    <router-view></router-view>
  </div>
</template>

<script>
    export default{
      name:"About",
      data(){
        return {
          msg:'Welcome to Your Vue.js App'
        };
      }
    }
</script>

<style>
</style>

AboutMe.vue:

<template>
  <div>
    吾乃钮祜禄甄强!!!
  </div>
</template>

<script>
    export default{
      name:"AboutMe",
      data(){
        return {
          msg:'Welcome to Your Vue.js App'
        };
      }
    }
</script>

<style>
</style>

AboutWebSeit.vue:

<template>
  <div>
    再见了!!!朕的江山!!!
  </div>
</template>

<script>
    export default{
      name:"AboutWebSeit",
      data(){
        return {
          msg:'Welcome to Your Vue.js App'
        };
      }
    }
</script>

<style>
</style>

index.js:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
import AboutMe from '@/components/AboutMe'
import AboutSeit from '@/components/AboutWebSeit'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Home',
      name: 'Home',
      component: Home
    },
		{
			path: '/About',
			name: 'About',
			component: About,
			children:[
				{
					path: '/AboutMe',
					name: 'AboutMe',
					component: AboutMe
				},
				{
					path: '/AboutWebSeit',
					name: 'AboutWebSeit',
					component: AboutWebSeit
				}
			]
		}
  ]
})
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-09-13 11:05:12  更:2022-09-13 11:05:19 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年6日历 -2024/6/15 8:48:47-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码