什么是vue脚手架?
Vue脚手架(Vue CLI)是一个官方提供的命令行工具,用于快速搭建和管理Vue.js项目的开发环境。它提供了一套可配置的脚手架,帮助开发者初始化Vue项目,并集成了开发所需的工具和依赖项,包括构建工具、开发服务器、打包工具等。babel、webpack都集成在其中。
前置环境的安装
官网下载node.js
配置node.js
安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装脚手架vue-cli
此处加上@才是3以上的版本
npm install -g @vue-cli
启动vue ui
启动成功
创建项目
项目配置
设置文件路径
点击在此创建新项目
设置项目名称
配置预设方案,第一次需手动配置
勾选路由
使用配置文件
按需选择vue版本,并选择标准配置
保存配置(下一次将不需要重新勾选)
创建成功
在vs-code打开项目文件夹
在终端输入命令启动项目
npm run serve
执行成功
项目结构
node_modules:依赖包
public:公共的静态资源
src:
main.js:入口文件
app.vue:vue项目的启动挂载页面
router:内部路由管理,页面内部的跳转
views:视图层,一些vue页面文件
assets:图片、js等一些静态文件
components:组件,一些共用的模板
修改初始页面
-
删除hello.vue,并在components新建Login.vue
搜索Vetur插件安装实现代码提示
- 用模板新建页面内容,类似html的!
添加如下内容
<template>
<!-- 页面层 -->
<div>
<h1>Vue登陆!</h1>
</div>
</template>
<script>
export default {
放数据和方法
data(){
return {};
},
methods: {
}
}
</script>
<style>
/* 样式层 */
</style>
- 更改路由
打开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')
}
]
变更为,同时引入Login
import Login from '../components/Login.vue'
···
···
const routes = [
{
path: '/Login',
name: 'Login',
component: Login
}
]
- 将App.vue的router-link都删除,保留一个路由占位符
<template>
<div id="app">
<router-view/>
</div>
</template>
运行报错
原因是代码不符合规范,eslint限制太过于严格,初学者无法适应,可通过关闭eslint检查解决问题
- 在项目根目录的vue.config.js配置文件(如果没有就创建)进行配置
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
lintOnSave: false, //加入,忽略格式检查
transpileDependencies: true
})
成功运行
注意:此处/Login前需要有#
-
对根进行重定向
通过对根进行重定向,实现访问IP即显示登陆
const routes = [
{
path: '/',
redirect: "/Login"
},
{
path: '/Login',
name: 'Login',
component: Login
}
]
访问根将自动跳转到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
scoped属性:使用scoped
属性后,样式只会作用于当前组件的元素,不会影响到其他组件或全局样式。
修改样式如下,使用less语法
<style lang="less" scoped>