• 一篇让你使用vue-cli搭建SPA项目


    目录

    一.Vue-CLi

    二.SAP项目

    三.为什么使用vue-cli搭建SPA项目

    四. SPA项目的搭建

    4.1.检查

     4.2.安装

     4.3.构建

     4.4. 启动

    4.5.导入

     ​编辑

     五.路由及嵌套使用

    5.1.路由

     5.2.嵌套

                好啦今天到这了,希望能帮到你!!!


    一.Vue-CLi

    Vue CLI 是一个基于 Vue.js 快速开发单页应用的脚手架工具。它提供了一整套构建工具和开发环境,能够帮助开发者快速创建、配置和部署 Vue.js 项目。

    Vue CLI 的主要功能包括:

    1. 项目初始化:通过命令行工具或可视化界面创建新的 Vue.js 项目,并自动配置好项目结构和基本的开发环境。

    2. 开发服务器:提供一个本地开发服务器,在开发过程中支持热重载(Hot Reload)和实时预览。

    3. 项目构建:支持将 Vue.js 项目打包成生产环境所需的静态文件,包括优化、压缩、代码分割等功能。

    4. 插件系统:可以扩展 Vue CLI 的功能,集成第三方插件或自定义插件。

    Vue CLI 非常适合快速搭建和开发 Vue.js 单页应用,它提供了一系列的默认配置,同时也支持定制化配置,满足不同项目的需求。有了 Vue CLI,开发者可以更加专注于业务逻辑的实现,而无需过多关注构建和配置的细节。

    二.SAP项目

    SPA 项目是指基于单页应用(Single Page Application)的项目。在 SPA 项目中,整个应用的内容都加载在一个单独的页面中,通过前端路由(如 Vue Router 或 React Router)来动态切换不同的视图和组件,而无需重新加载整个页面。

    SPA 项目有以下特点:

    1. 前后端分离:SPA 项目通常采用前后端分离的架构,前端负责页面的呈现和交互,后端负责数据的提供。前端通过接口与后端进行数据交互,从而实现页面内容的动态更新。

    2. 更快的用户体验:由于 SPA 只在初始加载时需要加载所有必要资源,之后的页面切换只需要加载相应的数据,因此用户体验更加流畅,无需频繁重新加载整个页面。

    3. 增强的交互性:SPA 通过 JavaScript 动态更新页面内容,可以实现更丰富的交互效果和用户操作,提升用户体验。

    4. 前端路由控制:SPA 项目使用前端路由来管理页面之间的切换,通过定义路由规则,响应用户操作并加载对应的组件或视图。

    常见的 SPA 框架有 Vue.js 和 React,它们提供了相应的工具和生态系统来帮助开发者搭建和开发 SPA 项目。通过这些框架,开发者可以便捷地构建交互性强、用户体验良好的单页应用。

    三.为什么使用vue-cli搭建SPA项目

    使用 Vue CLI(Vue Command Line Interface)搭建 SPA(Single Page Application)项目有以下几个主要原因:

    1. 快速搭建:Vue CLI 提供了一个命令行界面,可以快速创建和配置一个全功能的 Vue 项目。通过简单的命令,你可以快速生成项目结构和基础配置,省去了手动配置的繁琐过程,让你能够更快地开始开发。

    2. 项目结构规范:Vue CLI 遵循了一套官方推荐的项目结构规范,这种规范的项目结构能够提高代码的可读性、可维护性和可扩展性。同时,Vue CLI 还提供了各种插件和预设,帮助你构建现代化的前端项目。

    3. 丰富的插件生态系统:Vue CLI 支持各种插件和扩展,你可以根据项目需求选择和安装需要的插件,如路由管理、状态管理、代码检查、单元测试等等。这些插件能够大幅度提升开发效率,简化某些常用功能的集成。

    4. 开发工具支持:Vue CLI 集成了开发所需的工具链,包括 webpack、Babel、ESLint 等等。这些工具对于构建、编译和调试应用非常重要,使用 Vue CLI 可以避免手动配置这些工具,减少出错的可能性,提高开发效率。

    5. 易于扩展和定制:Vue CLI 支持自定义配置,并提供了丰富的插件系统,你可以根据项目需求进行扩展和定制。这使得你可以灵活地根据项目要求进行定制化开发,并添加自己的工具和功能。

    使用 Vue CLI 搭建 SPA 项目可以帮助你快速启动项目,并且享受到 Vue 生态系统的众多优点和工具的支持,提高开发效率,同时也保持项目结构的规范和可维护性。

    四. SPA项目的搭建

    4.1.检查

    Win+R,输入cmd,打开cmd窗口,输出如下命令:

    node -v

    npm -v

    检查环境变量及配置是否已配置完成

    如图:

     在本人博客中有 node.js 的下载安装和环境搭建  :nodejs下载安装和环境搭建

     4.2.安装

    环境变量配置无误后,继续安装vue-cli ,输出如下命令:

    npm install -g vue-cli

    npm install webpack -g

    注: 以上两个命令需要分开执行

     操作如图 : 


     安装成功后,会出现如下文件,在node的下载路径的node_global文件中

    安装完成之后打开命令窗口并输入 vue -V(注意这里是大写的“V”),如果出现相应的版本号,则说明安装成功。

     4.3.构建

    使用脚手架vue-cli(2.X版)来构建项目

    在开发目录下面打开cmd窗口,输入以下指令继续项目创建 : 

    vue init webpack spa

    注 : 其中 spa 是项目名称,可以自己进行修改项目名称。

    创建完后,会有以下9个选择的选项,需要根据我们的需要进行选择。

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

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

        3.Author:作者,填写自己的笔名或者随便写之后直接回车

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

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

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

        7.Setup 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即可。

     操作如图 : 

     4.4. 启动

    项目构建后进行项目启动

    首先 cd 加速项目名进入项目路径下

    命令 : cd spa 

    之后再输入命令启动项目:

    npm run dev

    项目启动成功后,会有一个访问路径,在浏览器中进行访问即可。

     操作如图 : 

     进入以下页面后,说明成功开启:

    4.5.导入

    在去创建项目的路径中,将项目导入开发软件当中。

    导入后了解项目结构 (如图) : 

     

    在项目开发过程中,命令窗口不可以关闭,不然就项目关闭,项目启动不了。

    将以下命令窗口留在后台即可。

     五.路由及嵌套使用

    5.1.路由

    在项目中找到src文件下的components文件,在该文件下创建两个主键

     About.vue

     Home.vue

    在项目中找到src文件下的router文件,在该文件的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: 'HelloWorld',
    12. component: HelloWorld
    13. },
    14. {
    15. path: '/',
    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. })

    在项目中找到src文件下的App.vue中,修改为以下代码 

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

    在次访问浏览器,效果如图 :

     5.2.嵌套

    在SPA项目中,路由的嵌套是为了实现页面的层级结构和组件的复用。通过路由的嵌套,可以将页面划分为多个层级,并在每个层级中加载对应的组件或子页面。

    以下是一些原因解释为什么需要在SPA项目中使用路由嵌套:

    • 页面层级结构:路由的嵌套可以实现页面的层级结构,使得页面之间可以有父子关系。这样可以更好地组织和管理页面,使得用户在使用应用时可以按照层级关系进行导航和操作。
    • 组件复用:通过路由的嵌套,可以将一些通用的组件定义在父级路由中,然后在子级路由中使用。这样可以实现组件的复用,减少代码的重复编写,提高开发效率。
    • 动态加载:通过路由的嵌套,可以实现按需加载页面和组件。在访问某个子页面时,只需要加载该子页面所需的组件和资源,而不需要加载整个应用的所有内容。这样可以减少初始加载时间,提高页面的加载速度。
    • 权限控制:通过路由的嵌套,可以实现对不同层级页面的权限控制。例如,某些页面只有特定的用户或角色才能访问,可以通过路由的嵌套结构和路由守卫来实现权限控制的逻辑。
      路由的嵌套在SPA项目中是为了实现页面的层级结构、组件的复用、动态加载和权限控制等功能。它可以提高项目的可维护性和开发效率,同时也能够提供更好的用户体验。

    在项目中找到src文件下的components文件,在该文件下创建两个主键

    AboutMe.vue

    1. <template>
    2. <div>
    3. <div>本站格言:做西格玛男人div>
    4. div>
    5. template>
    6. <script>
    7. export default {
    8. name: 'AboutMe',
    9. data () {
    10. return {
    11. msg: '嗨!嗨!嗨!'
    12. }
    13. }
    14. }
    15. script>
    16. <style>
    17. style>

    AboutMeaning.vue

    1. <template>
    2. <div>
    3. <p>永远不掉落女人的陷阱p>
    4. div>
    5. template>
    6. <script>
    7. export default {
    8. name: 'AboutMeaning',
    9. data () {
    10. return {
    11. msg: '嗨!嗨!嗨!'
    12. }
    13. }
    14. }
    15. script>
    16. <style>
    17. style>

    在项目中找到src文件下的router文件,在该文件的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. import AboutMe from '@/components/AboutMe'
    7. import AboutMeaning from '@/components/AboutMeaning'
    8. Vue.use(Router)
    9. export default new Router({
    10. routes: [
    11. {
    12. path: '/',
    13. name: 'HelloWorld',
    14. component: HelloWorld
    15. },
    16. {
    17. path: '/',
    18. name: 'Home',
    19. component: Home
    20. },
    21. {
    22. path: '/Home',
    23. name: 'Home',
    24. component: Home
    25. },
    26. {
    27. path: '/About',
    28. name: 'About',
    29. component: About,
    30. children:[{
    31. path: '/',
    32. name: 'AboutMe',
    33. component: AboutMe
    34. },{
    35. path: '/AboutMe',
    36. name: 'AboutMe',
    37. component: AboutMe
    38. },{
    39. path: '/AboutMeaning',
    40. name: 'AboutMeaning',
    41. component: AboutMeaning
    42. }]
    43. }
    44. ]
    45. })

    About.vue修改为以下代码: 

    1. <template>
    2. <div>
    3. <router-link to="AboutMe">格言router-link>
    4. <router-link to="AboutMeaning">意义router-link>
    5. <router-view>router-view>
    6. div>
    7. template>
    8. <script>
    9. export default {
    10. name: 'About',
    11. data () {
    12. return {
    13. msg: '嗨!嗨!嗨!'
    14. }
    15. }
    16. }
    17. script>
    18. <style>
    19. style>

    访问修改如图 : 

                好啦今天到这了,希望能帮到你!!!

  • 相关阅读:
    力扣第36天----第518题、第377题
    axios的简介认识(从头到尾详细)
    【工具】markdown
    【python初学者日记】selenium初体验——“秒杀商品”、“清空购物车”技能养成记(一)
    Git实战技巧-多人协作开发出现代码冲突,如何合并代码
    C# 使用ExcelDataReader读取Excel文件内容
    python+django_vue旅游酒店预订出行订票系统pycharm项目lw
    unity生成模型预览图并导出图片
    创意中秋与国庆贺卡 - 用代码为节日增添喜悦
    Clickhouse架构与设计
  • 原文地址:https://blog.csdn.net/m0_74915426/article/details/133140404