• 使用vue-cli搭建SPA项目->spa项目的构建,基于spa项目路由完成,基于spa项目完成嵌套路由


    • spa项目的构建
    • 基于spa项目路由完成
    • 基于spa项目完成嵌套路由

    1.spa项目的构建

    vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下:          
       vue init webpack xxx                    
       注1:xxx 为自己创建项目的名称
       注2:必须先安装vue,vue-cli,webpack,node等一些必要的环境

    安装vue-cli
    npm install -g vue-cli
    npm install webpack -g
       注1:安装成功后,会出现如下文件
            D:\initPath
                 node-v10.15.3-win-x64
                   node_global
                     vue
                     vue.cmd
                     vue-init
                     vue-init.cmd
                     vue-list
                     vue-list.cmd
       注2:安装完成之后打开命令窗口并输入 vue -V(注意这里是大写的“V”),如果出现相应的版本号,则说明安装成功。

    使用脚手架vue-cli(2.X版)来构建项目
       ## 步骤一:使用脚手架创建项目骨架
       ## 此步骤可理解成:使用eclipse创建一个maven的web项目
       cmd    #打开命令窗口; d:    #切换到d盘; cd d:\temp   #进入d:\temp目录
       vue init webpack spa                    

       #此命令用于创建SPA项目,它会在当前目录生成一个以“spa”命名的文件夹
       #spa1即为项目名,项目名不能用中文或大写字母,然后终端会出现“一问一答”模式(见注2)
       注1:cmd命令行窗口显示中文乱码,多是因为cmd命令行窗口字符编码不匹配导致
            修改cmd窗口字符编码为UTF-8,命令行中执行:chcp 65001
            切换回中文:chcp 936
            这两条命令只在当前窗口生效,重启后恢复之前的编码

        注2:“一问一答”模式

             1.Project name:项目名,默认是输入时的那个名称spa1,直接回车

             2.Project description:项目描述,直接回车

             3.Author:作者,随便填或直接回车

             4.Vue build:选择题,一般选第一个

               4.1.Runtime + Compiler: recommended for most users//运行加编译,官方推荐,就选它了

           4.2.Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files

                  - render functions are required elsewhere//仅运行时,已经有推荐了就选择第一个了

             5.Install vue-router:是否需要vue-router,Y选择使用,这样生成好的项目就会有相关的路由配置文件

             6.Use ESLint to lint your code:是否用ESLint来限制你的代码错误和风格。N  新手就不用了,但实际项目中一般都会使用,这样多人开发也能达到一致的语法

             7.Set up unit tests:是否安装单元测试 N

             8.Setup e2e tests with Nightwatch?:是否安装e2e测试  N

             9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)

              > Yes, use NPM                    

                 Yes, use Yarn

               No, I will handle that myself     //选择题:选第一项“Yes, use NPM”是否使用npm install安装依赖

            全部选择好回车就进行了生成项目,出现如下内容表示项目创建完成

            # Project initialization finished!

    ## 步骤二:运行完上面的命令后,我们需要将当前路径改变到SPA这个文件夹内,然后安装需要的模块

       ## 此步骤可理解成:maven的web项目创建成功后,修改pom文件添加依赖

       cd spa1                                  #改变路径到spa1文件夹下

       npm install                              #安装所有项目需要的npm模块

       ## 步骤二:运行完上面的命令后,我们需要将当前路径改变到SPA这个文件夹内,然后安装需要的模块

       ## 此步骤可理解成:maven的web项目创建成功后,修改pom文件添加依赖

       cd spa1                                  #改变路径到spa1文件夹下

       npm install                              #安装所有项目需要的npm模块

       ## 步骤三:启动并访问项目

       ## 此步骤可理解成:启动tomcat,并通过浏览器访问项目

       cd spa1

       npm run dev

       注1:项目启动成功后,打开浏览器输入“http://localhost:8080”即可

       注2:vue-cli构建的项目,在控制台npm run dev启动后,默认的调试地址是8080端口的

    2.基于spa项目路由完成

    1. //main.js
    2. // The Vue build version to load with the `import` command
    3. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    4. import Vue from 'vue'
    5. import App from './App'
    6. import router from './router'
    7. Vue.config.productionTip = false
    8. /* eslint-disable no-new */
    9. new Vue({
    10. el: '#app',
    11. router,
    12. components: { App },
    13. template: ''
    14. })
    1. //Home.vue
    1. //About.vue
    1. //index.js
    2. import Vue from 'vue'
    3. import Router from 'vue-router'
    4. import HelloWorld from '@/components/HelloWorld'
    5. import Home from '@/components/Home'
    6. import About from '@/components/About'
    7. Vue.use(Router)
    8. export default new Router({
    9. routes: [
    10. {
    11. path: '/',
    12. name: 'Home',
    13. component: Home
    14. },
    15. {
    16. path: '/Home',
    17. name: 'Home',
    18. component: Home
    19. },
    20. {
    21. path: '/About',
    22. name: 'About',
    23. component: About
    24. }
    25. ]
    26. })
    1. //App.vue

    3.基于spa项目完成嵌套路由

    嵌套路由基于spa项目路由上,增加修改了以下代码,重复代码就不放了

    1. //components下的AboutMe
    1. //components下的AboutWebsite
    1. //components下的About
    1. //router下的index.js
    2. import Vue from 'vue'
    3. import Router from 'vue-router'
    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. export default new Router({
    11. routes: [
    12. {
    13. path: '/',
    14. name: 'Home',
    15. component: Home
    16. },
    17. {
    18. path: '/Home',
    19. name: 'Home',
    20. component: Home
    21. },
    22. {
    23. path: '/About',
    24. name: 'About',
    25. component: About,
    26. children:[
    27. {
    28. path: '/AboutMe',
    29. name: 'AboutMe',
    30. component: AboutMe
    31. },
    32. {
    33. path: '/AboutWebsite',
    34. name: 'AboutWebsite',
    35. component: AboutWebsite
    36. }
    37. ]
    38. }
    39. ]
    40. })

  • 相关阅读:
    凉鞋的 Godot 笔记 201. 第三轮循环:引入变量
    mongodb手动迁移chunk脚本
    git commit 的规范
    [ 基础漏洞篇 ] webpack 前端源码泄露详解
    比较两个值是否相等
    ArcGIS基础:如何在大量数据里挑选随机样本(创建随机点工具)
    【web-攻击验证机制】(3.2.2)验证机制设计缺陷:证书传输易受攻击、密码修改功能、忘记密码功能
    【示波器专题】示波器探头的负载效应
    树莓派4B基于OpenCV的C++环境的串口通信
    Git常用命令
  • 原文地址:https://blog.csdn.net/weixin_73471776/article/details/133151732