vue脚手架搭建、介绍和初始页面的构造（图文详细）

什么是vue脚手架？

Vue脚手架（Vue CLI）是一个官方提供的命令行工具，用于快速搭建和管理Vue.js项目的开发环境。它提供了一套可配置的脚手架，帮助开发者初始化Vue项目，并集成了开发所需的工具和依赖项，包括构建工具、开发服务器、打包工具等。babel、webpack都集成在其中。

前置环境的安装

官网下载node.js

配置node.js

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org
1

安装脚手架vue-cli

此处加上@才是3以上的版本

npm install -g @vue-cli
1

启动vue ui

启动成功

创建项目

项目配置

设置文件路径

点击在此创建新项目

设置项目名称

配置预设方案，第一次需手动配置

勾选路由

使用配置文件

按需选择vue版本，并选择标准配置

保存配置（下一次将不需要重新勾选）

创建成功

在vs-code打开项目文件夹

在终端输入命令启动项目

npm run serve
1

执行成功

项目结构

node_modules：依赖包

public：公共的静态资源

src：

main.js：入口文件

app.vue：vue项目的启动挂载页面

router：内部路由管理，页面内部的跳转

views：视图层，一些vue页面文件

assets：图片、js等一些静态文件

components：组件，一些共用的模板

修改初始页面

1. 删除hello.vue，并在components新建Login.vue

    搜索Vetur插件安装实现代码提示
   1

2. 用模板新建页面内容，类似html的！

​ 添加如下内容

<template>
    <!-- 页面层 -->
  <div>
    <h1>Vue登陆！</h1>
  </div>
</template>

<script>
export default {
放数据和方法
    data(){
        return {};
    },
    methods: {

    }
}
</script>

<style>
    /* 样式层 */
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3. 更改路由

​ 打开router内的index.js 删除“/about”和“/”，加入“/Login”的路由

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // 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/AboutView.vue')
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

​ 变更为，同时引入Login

import Login from '../components/Login.vue'
···
···
const routes = [
  {
    path: '/Login',
    name: 'Login',
    component: Login
  }
]
1
2
3
4
5
6
7
8
9
10

4. 将App.vue的router-link都删除，保留一个路由占位符

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
1
2
3
4
5

​ 运行报错

原因是代码不符合规范，eslint限制太过于严格，初学者无法适应，可通过关闭eslint检查解决问题

5. 在项目根目录的vue.config.js配置文件（如果没有就创建）进行配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  lintOnSave: false,    //加入，忽略格式检查
  transpileDependencies: true
})

1
2
3
4
5
6

​ 成功运行

​ 注意：此处/Login前需要有#

6. 对根进行重定向

   通过对根进行重定向，实现访问IP即显示登陆

const routes = [
  {
    path: '/',
    redirect: "/Login"
  },
  {
    path: '/Login',
    name: 'Login',
    component: Login
  }
]
1
2
3
4
5
6
7
8
9
10
11

​ 访问根将自动跳转到Login界面

样式的less语法

Less（Leaner Style Sheets）是一种CSS预处理器，它扩展了CSS的语法并提供了更多功能和特性。Less允许开发者使用变量、嵌套规则、混合（Mixins）、运算和函数等来编写样式代码，然后将其编译为标准的CSS代码。

需要先进行安装

在终端输入指令安装

npm install -y less@4.1.3 less-loader@5.0.0 --save-dev
1

scoped属性：使用scoped属性后，样式只会作用于当前组件的元素，不会影响到其他组件或全局样式。

修改样式如下，使用less语法

<style lang="less" scoped>
1