使用vue-cli搭建SPA项目

最新推荐文章于 2024-07-01 18:30:27 发布

zsm030616

最新推荐文章于 2024-07-01 18:30:27 发布

阅读量85

点赞数

文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/zsm030616/article/details/126802193

版权

本文详细介绍了如何使用vue-cli搭建单页应用(SPA)项目，包括环境配置、项目创建、依赖安装及启动。同时，文章还阐述了在SPA项目中设置和使用路由的步骤，以及如何进行嵌套路由配置。此外，提到了Vue组件如Home.vue的编写，并讨论了项目中App.Vue的角色。最后，讨论了如何修改端口号以避免冲突。

摘要由CSDN通过智能技术生成

一，如何使用vue-cli搭建SPA项目

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

vue init webpack 项目名

    注：必须先安装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

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

使用脚手架Vue-cli来构建项目
在这里插入图片描述

注1：cmd命令行窗口显示中文乱码，多是因为cmd命令行窗口字符编码不匹配导致

    修改cmd窗口字符编码为UTF-8，命令行中执行：chcp 65001

    切换回中文：chcp 936

    这两条命令只在当前窗口生效，重启后恢复之前的编码。

注2：“一问一答”模式

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

     2.Project description：项目描述，直接回车

     3.Author：作者，随便填或直接回车

     4.Vue build：选择题，一般选第一个

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

  4.2Runtime-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模块

步骤三：启动并访问项目

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

cd spa1

npm run dev

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

注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,

    },

步骤四：停止项目添加element-ui模块

执行：npm install element-ui -S -S就是-save的缩写

补充：

注1：使用vue+elementUI创建SPA项目，一般情况下其项目结构组成如下：

    Vue + ESLint + webpack + elementUI + ES6

    Vue: 主要框架

    ESLint: 帮助我们检查Javascript编程时的语法错误，这样在一个项目中多人开发，能达到一致的语法

    Webpack: 设置代理、插件和loader处理各种文件和相关功能、打包等功能。整个项目中核心配置

    elementUI: 是基于vue的一套样式框架，里面有很多封装好的组件样式

    ES6: 全称ECMAScript6.0，是JavaScript的下一个版本标准，2015.06发版

二，如何在spa项目中使用路由

步骤：

1.将原有的路由设置取消

2.自定义一个Home.vue文件

3.修改src/router/index.js路由配置

补充：有关项目里App.Vue的解释
在这里插入图片描述
代码演示

<template>
</template>
<div>
这里是首页
</div>
<script>
export default {
  name: 'Home',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
<style>
</style>

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: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Home',
      name: 'Home',
      component: Home
    },
    {
      path: '/About',
      name: 'About',
      component: About
    }
  ]
})

三，嵌套路由的使用

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: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Home',
      name: 'Home',
      component: Home
    },
    {
      path: '/About',
      name: 'About',
      component: About,
      
      children:[{
      path:'/AboutMe',
      name :'AboutMe',
      component:AboutMe
      },{
        path: '/AboutWebSite',
        name: 'AboutWebSite',
        component: AboutWebSite
      }]
    }
  ]
})