• 使用vue-cli搭建SPA项目


                                                                          目录

    一、vue-cli构建SPA项目及SPA项目结构介绍

    1.1利用vue-cli构建SPA

    1.2spa的访问过程:

    1.3如何安装vue-cli命令

     以上命令ok后,构建spa项目

    二、SPA完成路由的开发

    步骤

    三、嵌套路由

    children:[ ]


    一、vue-cli构建SPA项目及SPA项目结构介绍

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

       vue init webpack xxx                    

       注:xxx 为自己创建项目的名称;必须先安装vue,vue-cli,webpack,node等一些必要的环境

    1.1利用vue-cli构建SPA

            安装vue-cli命令-npm install (-g、-s、-d)

            -g:js依赖会下载到node_global中

            -s:会被打包(安装到dependencies里面)

            -d:只会在开发环境中被依赖

    1.2spa的访问过程:

            (1)访问index.html

            (2)index.html通过main.js中的vue实例管理#app边界,同时指定App.vue模板

            (3)App.vue中包含了图片以及锚点,而锚点与组件的对应关系存在router/index.js中,所以就指向了一个组件

            (4)最终App.vue中就显示了logo图片以及helloworld.vue的内容

    1.3如何安装vue-cli命令

    npm install -g vue-cli

    该行命令在哪里的cmd窗口执行都可以(根目录、管理员窗口等)

    npm install webpack -g

     以上命令ok后,构建spa项目

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

    xiaokun_spa文件夹则为项目名,项目名不能用中文或大写字母

     

     这样spa项目就创建好了,这边使用HBuilder X导入

    导入后,我们来认识一下,其中的类

     更改端口号8080——>8083:

    spa访问过程:

            1.访问index.html

            2.index.html通过main.js中的vue实例管理#app边界,同时指定APP.vue模板

            3. APP.vue中包含了logo图片以及锚点,而锚点与组件的对应关系存在router/index.js中,所有就指向了一个组件

            4.最终APP.vue中就显示了logo图片以及helloworld.vue的内容

    二、SPA完成路由的开发

    步骤

    1、引入路由js依赖:main.js中已经完成

    2、定义组件:呈现形式是以.vue文件展示

            template标签中定义组件内容

            通过export default指定组件的名字

    3、定义路由与组件之间的对应关系

            router/index.js文件中进行定义

    4、获取路由对象:main.js中已经完成

    5、挂载Vue实例:main.js中已经完成

    6、定义锚点:App.vue 使用 router-view

    7、触发事件:App.vue 使用 router-link to

     Home.vue:

    1. <template>
    2. <div>
    3. 这是首页内容,展示最新的10篇博客
    4. div>
    5. template>
    6. <script>
    7. export default {
    8. name: 'Home',
    9. data () {
    10. return {
    11. msg: 'Welcome to Your Vue.js App'
    12. }
    13. }
    14. }
    15. script>
    16. <style>
    17. style>

    About.vue:

    1. <template>
    2. <div>
    3. 这是关于本站显示的内容区域,本站的发展史...
    4. div>
    5. template>
    6. <script>
    7. export default {
    8. name: 'About',
    9. data () {
    10. return {
    11. msg: 'Welcome to Your Vue.js App'
    12. }
    13. }
    14. }
    15. script>
    16. <style>
    17. style>

    index.js:

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import HelloWorld from '@/components/HelloWorld'
    4. import Home from '@/components/Home'
    5. import About from '@/components/About'
    6. Vue.use(Router)
    7. export default new Router({
    8. routes: [
    9. {
    10. path: '/',
    11. name: 'Home',
    12. component: Home
    13. },
    14. {
    15. path: '/Home',
    16. name: 'Home',
    17. component: Home
    18. },
    19. {
    20. path: '/About',
    21. name: 'About',
    22. component: About
    23. },
    24. ]
    25. })

    App.vue:

    1. <template>
    2. <div id="app">
    3. <router-link to="/Home">首页router-link>
    4. <router-link to="/About">关于router-link>
    5. <router-view/>
    6. div>
    7. template>
    8. <script>
    9. export default {
    10. name: 'App'
    11. }
    12. script>
    13. <style>
    14. #app {
    15. font-family: 'Avenir', Helvetica, Arial, sans-serif;
    16. -webkit-font-smoothing: antialiased;
    17. -moz-osx-font-smoothing: grayscale;
    18. text-align: center;
    19. color: #2c3e50;
    20. margin-top: 60px;
    21. }
    22. style>

    三、嵌套路由

    children:[ ]

    AboutMe.vue:

    1. <template>
    2. <div>站长div>
    3. template>
    4. <script>
    5. export default {
    6. name:'AboutMe',
    7. data() {
    8. return {
    9. };
    10. }
    11. }
    12. script>
    13. <style>
    14. style>

    AboutWebSite.vue:

    1. <template>
    2. <div>本站div>
    3. template>
    4. <script>
    5. export default {
    6. name:'AboutWebSite',
    7. data() {
    8. return {
    9. };
    10. }
    11. }
    12. script>
    13. <style>
    14. style>

    index.js:

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. // 3.定义路由与组件的对应关系
    4. import HelloWorld from '@/components/HelloWorld'
    5. import Home from '@/components/Home'
    6. import About from '@/components/About'
    7. import AboutMe from '@/components/AboutMe'
    8. import AboutWebSite from '@/components/AboutWebSite'
    9. Vue.use(Router)
    10. // 4.生成路由对象
    11. export default new Router({
    12. routes: [
    13. {
    14. path: '/',
    15. // 这个可要可不用
    16. name: 'Home',
    17. component: Home
    18. },
    19. {
    20. path: '/Home',
    21. name: 'Home',
    22. component: Home
    23. },
    24. {
    25. path: '/About',
    26. name: 'About',
    27. component: About
    28. },
    29. {
    30. path: '/AboutMe',
    31. name: 'AboutMe',
    32. component: AboutMe
    33. },
    34. {
    35. path: '/AboutWebSite',
    36. name: 'AboutWebSite',
    37. component: AboutWebSite
    38. }
    39. ]
    40. })

    About.vue:

    1. <template>
    2. <div>
    3. <router-link to="/AboutMe">关于站长router-link>
    4. <router-link to="/AboutWebSite">关于本站router-link>
    5. <router-view>router-view>
    6. div>
    7. template>
    8. <script>
    9. export default {
    10. name:'About',
    11. data() {
    12. return {
    13. };
    14. }
    15. }
    16. script>
    17. <style>
    18. style>

  • 相关阅读:
    无涯教程-JavaScript - INDEX函数
    VMware-克隆虚拟机
    cygwin编译wget过程记录
    开发一个python工具,pdf转图片,并且截成单个图片,然后修整没用的白边及循环遍历文件夹全量压缩图片
    Jmeter(108)——Concurrency Thread Group
    【jvm源码】-2.对象核心源码
    ESP32-C3入门教程 环境篇⑦——ESP-IDF构建自定义组件模板(components/CMakeLists)
    开源VisualFbeditor中文版,vb7 IDE,VB6升级64位跨平台开发安卓APP,Linux程序
    在麒麟V10操作系统上安装MySQL数据库
    es各种报错问题及解决方案20231121
  • 原文地址:https://blog.csdn.net/weixin_67450855/article/details/126796809