目录

1.概述

2 .使用vue cli 构建项目

—— 1. 安装vue cli

—— 2.创建项目

—— 3. 启动项目

—— 4. 访问

—— 5. 目录结构

3. 入门案例：Vue文件

4. 常见问题【提示禁用的脚本】

1.概述

1. 单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

2. 在vue的spa中，需要编写vue文件。

3. Vue提供单文件组件（扩展名为 .vue的文件），每一个vue文件由3部分组成：

4. 模板（html代码）：

5. 脚本（js代码）：

6. 样式（css代码）：

    ​    //此处写js代码export default { } ​    /* 此处写css样式代码 */

2 .使用vue cli 构建项目

—— 1. 安装vue cli

命令：

npm install -g @vue/cli

例：

—— 2.创建项目

• 步骤1：创建项目

vue create 项目名

例：

• 步骤2：根据需求选择

• 

注：如最后在填写，是否保存以上设置时，填写yes,则会进行下一步填写，会让其为该套设置起一个名字。这样我们下次在创建该类项目时就可以直接进行选择该套名字设置即可。

注【键盘按键】：空格：将其选中。

                             enter: 进行下一项选择

—— 3. 启动项目

cd 项目名npm run serve

• 启动效果

—— 4. 访问

• 按住Ctrl键，点击Local网址即可访问

—— 5. 目录结构

• 主要目录结构

  • 入口页面：程序显示的第一个页面

  • 页面目录：用于存放“页面功能”

  • 路由目录：用于给"功能页面"配置访问路径

  

• 其他目录结构

3. 入门案例：Vue文件

• l 需求：访问测试页面 /test --> Test.vue

• 步骤1： 修改App.vue 确定访问路径

  

• 步骤2 ：编写测试页面Test.vue

<!--注：快捷键：   
      测试页面  
​export default {​}​

• 步骤3 ：配置路径 【src—> router—> index.js】

—— 配置路径的第一种方式：通过组件名称进行调用

import Test from '../views/Test.vue'

{    path: '/test',    name: '测试',    component: Test  //调用组件名称Test  },

—— 配置路径的第二种方式：直接导入路径

{    path: '/test',  //路径    name: '测试程序',    component: () => import('../views/Test.vue') //vue页面  },

• 步骤四：测试

4. 常见问题【提示禁用的脚本】

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

• 解决操作：

  • 以管理员的身份打开PowerShell

    

  • 运行命令 “set-ExecutionPolicy RemoteSigned”

  • 输入“ Y ” 在回车

  

注：回车后，在运行项目即可解决。