概述

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
在vue的spa中，需要编写vue文件。
Vue提供单文件组件（扩展名为 .vue的文件），每一个vue文件由3部分组成：
1. 模板（html代码）：<template>
2. 脚本（js代码）：<script>
3. 样式（css代码）：<style>
就是只有一张HTML页面所有的页面跳转都在这个HTML里面局部刷新

使用vue cli构建项目

1.安装node.js 安装vue.cli 必须先安装node.js

node.js安装参考：Node.js安装与基本使用_陶然同学。-CSDN博客_nodejs安装与使用目录1.Node.js 1.1什么是Node.js 1.2环境搭建 1.2.1下载 1.2.2安装 1.2.3测试 1.3切换源 1.3.1工具cnpm 1.3.2工具nrm 1.4Node.js和npm关系 1.5基本操作 ...https://blog.csdn.net/weixin_45481821/article/details/122244505?spm=1001.2014.3001.5501

2.安装vue cli

npm install -g @vue/cli

3.创建项目

vue create 项目名

4.根据需求进行选择

步骤1：在这里选择手动配置

步骤2：上下键控制空格选择这里选择Babel转码器 Router Vuex

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end）测试

步骤3：选择版本 2.x

步骤4：是否开启history模式选择否

步骤6：选择你想把你的配置文件放在一个独立的配置文件中？还是放到package.json中？

选择package.json即可没多大区别

步骤7：询问你是否保存以上设置方便下次选择这里选择否如果选择是下面还要给你的配置取个名字

步骤8：cd 进入项目 npm run serve 启动项目

步骤9：出现两个地址按住Ctrl键点击出现下面页面项目创建成功

目录结构

主要目录结构
1. 入口页面：程序显示的第一个页面
2. 页面目录：用于存放“功能页面”。
3. 路由目录：用于给“功能页面”配置访问路径

入门案例：Vue文件

需求：访问/test-------Test.vue页面

步骤1：编写Test.vue页面

<template>
  <div>
      这是一个测试页面
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

步骤2：在路由定义Test.vue路径

  {
    path: '/test',
    name: 'testName',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Test.vue')
  }

步骤3：在App.vue编写Test.vue访问路径

      <router-link to="/test">测试页面</router-link>

步骤4：访问Test.vue

常见问题

创建vue项目时，提示禁用的脚本

需要操作：

管理员身份打开PowerShell

1.运行命令set-ExecutionPolicy RemoteSigned

2.输入 Y 回车

看了vue cli的安装方式总结一下。如有不多请多多指教！希望给您带来帮助！

vue-cli参考文档：介绍 | Vue CLI🛠️ Vue.js 开发的标准工具

https://cli.vuejs.org/zh/guide/

我来回复

暂无回复内容

最新【vue】使用vue-cli5.0快速搭建一个项目

概述

使用vue cli构建项目

目录结构

入门案例：Vue文件

常见问题

回复