Vue快速入门

最新推荐文章于 2026-04-08 08:16:39 发布

原创最新推荐文章于 2026-04-08 08:16:39 发布 · 43 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文提供两个Vue快速入门教程资源，包括黑马程序员的基础教程和狂神说Java的上手指南。内容涵盖Vue的基本概念、组件创建、模板语法、VueRouter的安装与使用，以及ElementUI的集成，还涉及SASS的配置和项目启动测试。通过这些步骤，读者可以在短时间内掌握Vue开发的基础知识。

Vue快速入门

黑马程序员vue前端基础教程-4个小时带你快速入门vuebilibili

【狂神说Java】Vue最新快速上手教程通俗易懂哔哩哔哩bilibili](【狂神说Java】Vue最新快速上手教程通俗易懂_哔哩哔哩_bilibili)

//模板可以是slot插槽可以使页面变得更加的灵活 <h1>内容页</h1> </template> <script> export default { name: "content" } </script> <style scoped> </style>

element UI +VUE

创建工程

创建一个hello文件

#进入到项目文件
cd hello
#安装vue-router
npm install vue-router指定版本号 --save-dev
#安装elementUI依赖
npm install element-ui -s
#安装依赖
npm install
#安装SASS加载器
cnpm install sass-loader node-sass --save-dev
#启动测试
npm run dev

npm命令解释

npm install moduleName:安装模块到项目目录下
npm install -g moduleName：-g的意思就是将模块安装到全局，具体安装到磁盘哪个位置，我们要使用npm config prefix查看位置
npm install -save moduleName：--save-dev的意思是将模块安装到项目目录下面，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

路由嵌套