Vue CLI是Vue.js官方提供的脚手架工具,帮助开发者快速搭建Vue应用,内置多种常用工具和插件,提高开发效率。本文将详细介绍Vue CLI学习入门的相关内容,包括安装、创建项目、路由配置和资源管理等。
Vue CLI简介Vue CLI是Vue.js官方提供的脚手架工具,它可以帮助开发者快速搭建Vue应用。通过Vue CLI,你可以轻松创建基于Vue的应用原型,它内置了各种常用的工具和插件,使得开发效率大大提高。Vue CLI不仅支持ES2015+语法,还集成了模块化打包、热重载、单元测试等功能,使得前后端开发更为便捷。
全局安装Vue CLI:使用npm命令安装Vue CLI到全局环境中。
npm install -g @vue/cli
验证安装:安装完成后,可以通过以下命令验证Vue CLI是否安装成功。
vue --version
输出版本号即表示安装成功。
创建新项目:使用vue create
命令创建一个新项目。以“my-vue-app”为例。
vue create my-vue-app
选择预设模板或功能列表:运行上述命令后,会弹出如下选项:
? Please pick a preset (Use arrow keys) > default (babel, eslint) default (Vue Router, pinia, ESLint, prettier) manual (customize features)
选择一个预设(preset),或者选择“manual”来手动配置你的项目。
选择配置:如果选择“manual”,会依次询问你是否需要使用特定的功能。例如:
Use history mode for router? (Use arrow keys) > No Yes
按照提示选择需要的功能,最后会生成一个基本的项目结构。
项目创建完成后,项目文件夹结构大致如下:
my-vue-app/ ├── node_modules/ ├── public/ │ ├── index.html │ └── favicon.ico ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ ├── main.js │ └── router.js ├── .gitignore ├── babel.config.js ├── package.json ├── README.md └── vue.config.js
node_modules/
:存放项目依赖的模块。public/
:存放静态资源文件,如index.html
和favicon.ico
。src/
:存放项目的源代码文件。.gitignore
:控制git忽略哪些文件。babel.config.js
:项目配置文件,用于设置转译规则。package.json
:包含项目配置和依赖信息。README.md
:项目说明文件。vue.config.js
:Vue CLI的配置文件,用于自定义构建过程的设置。启动开发服务器:在项目根目录下,执行以下命令启动开发服务器。
npm run serve
查看开发服务器:启动后,浏览器会自动打开或可以根据提示输入URL访问。
Local: http://localhost:8080/ Network: http://192.168.1.100:8080/
vue create
命令详解vue create
命令用于创建一个新的Vue项目。命令基本使用如下:
vue create <project-name>
该命令会根据指定项目名称创建一个新项目。通过运行命令,会自动创建项目的基本文件夹和文件结构,同时安装项目依赖库,并初始化Git仓库。
npm run serve
命令详解npm run serve
命令用于启动开发服务器。启动后,可以在浏览器中查看项目的实时预览,支持热重载功能,提高开发效率。
vue eject
命令详解及其注意事项vue eject
命令是Vue CLI中的一个高级命令,用于删除项目的配置文件并将其暴露给开发者。使用该命令后,Vue CLI将生成大量配置文件,开发者可以自行修改这些配置文件来精确控制构建过程。
使用命令:
vue eject
vue eject
命令后,原本由Vue CLI管理的配置将转移到开发者手中,这会增加维护复杂性。vue eject
,你将失去快速更新Vue CLI版本中自带的配置和功能的能力。Vue组件是Vue应用中的可重用的HTML代码片段。它可以帮助你将UI拆分为独立且可管理的小块,便于代码管理和复用。组件可以包含HTML模板、Vue实例选项等。
创建组件:在src/components
目录下创建一个名为HelloWorld.vue
的文件。
<!-- HelloWorld.vue --> <template> <div class="hello"> <h1>欢迎使用Vue组件!</h1> <p v-if="isVisible">这是一个可重用的Vue组件</p> </div> </template> <script> export default { name: 'HelloWorld', data() { return { isVisible: true } } } </script> <style scoped> .hello { color: #333; } </style>
使用组件:在src/App.vue
文件中引入并使用组件。
<!-- App.vue --> <template> <div id="app"> <HelloWorld /> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script>
父组件传值给子组件:在父组件中通过props给子组件传递数据。
<!-- ParentComponent.vue --> <template> <div> <ChildComponent :message="parentMessage" /> </div> </template> <script> import ChildComponent from "./ChildComponent.vue" export default { name: "ParentComponent", components: { ChildComponent }, data() { return { parentMessage: "这是从父组件传来的消息" } } } </script>
子组件传值给父组件:通过自定义事件实现子组件向父组件传递数据。
<!-- ChildComponent.vue --> <template> <div> <button @click="sendMessageToParent">点击发送消息</button> </div> </template> <script> export default { name: "ChildComponent", methods: { sendMessageToParent() { this.$emit("custom-event", "这是从子组件传来的消息") } } } </script>
使用自定义事件:在父组件中监听自定义事件。
<!-- ParentComponent.vue --> <template> <div> <ChildComponent @custom-event="handleMessage" /> </div> </template> <script> import ChildComponent from "./ChildComponent.vue" export default { name: "ParentComponent", components: { ChildComponent }, methods: { handleMessage(message) { console.log("收到的消息:", message) } } } </script>
安装Vue Router:首先需要安装Vue Router模块。
npm install vue-router
配置路由:在src/router.js
中进行路由配置。
// src/router.js import { createRouter, createWebHistory } from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] const router = createRouter({ history: createWebHistory(), routes }) export default router
在主文件中使用路由:在main.js
中引入并使用配置好的路由。
// src/main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app')
创建路由组件:在src/views/
目录下创建路由对应的组件文件。
<!-- Home.vue --> <template> <div> <h1>首页</h1> </div> </template> <script> export default { name: 'Home' } </script>
导航到不同路由:在组件中使用<router-link>
标签进行路由跳转。
<!-- App.vue --> <template> <div id="app"> <router-link to="/">首页</router-link> <router-link to="/about">关于</router-link> <router-view /> </div> </template>
路由参数:在路由定义中使用动态参数。
const routes = [ { path: '/user/:id', name: 'User', component: User } ]
在组件中获取路径参数:
// User.vue <script> export default { name: 'User', props: ['id'], created() { console.log(this.$route.params.id) } } </script>
查询参数:使用$router.push
方法传递查询参数。
this.$router.push({ path: '/user', query: { id: 123 } })
在组件中获取查询参数:
// User.vue <script> export default { name: 'User', created() { console.log(this.$route.query.id) } } </script>
添加图片资源:将图片文件放入src/assets
目录。
src/ └── assets/ └── logo.png
引用静态资源:在组件中引用资源文件。
<!-- App.vue --> <template> <div id="app"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@/assets/logo.png" alt="Logo" /> </div> </template>
安装Sass或Less:使用npm安装Sass或Less及其相应编译器。
npm install sass @vue/cli-plugin-sass npm install less @vue/cli-plugin-less
编写Sass或Less文件:在src/assets
目录下创建一个Sass或Less文件。
/* src/assets/style.scss */ .container { padding: 20px; background-color: #f0f0f0; }
引入Sass或Less文件:在组件中引用并使用这个样式文件。
<!-- App.vue --> <template> <div id="app" class="container"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@/assets/logo.png" alt="Logo" /> </div> </template> <script> export default { name: 'App' } </script> <style scoped> @import '@/assets/style.scss'; </style>
安装Bootstrap:通过npm安装Bootstrap。
npm install bootstrap
引入Bootstrap:在src/main.js
中引入Bootstrap的CSS和JS文件。
// src/main.js import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap/dist/js/bootstrap.bundle.js' import { createApp } from 'vue' import App from './App.vue' createApp(App).use(router).mount('#app')
使用Bootstrap组件:在组件中使用Bootstrap的HTML标签和类名。
<!-- App.vue --> <template> <div id="app" class="container"> <h1 class="text-primary">欢迎使用Bootstrap!</h1> <button class="btn btn-primary">点击按钮</button> </div> </template> <script> export default { name: 'App' } </script>
通过以上步骤,你已经成功搭建了一个基本的Vue项目,并掌握了Vue CLI的基本使用方法,也学会了如何管理项目中的资源和样式。如果你想要深入了解Vue的更多高级功能,可以继续阅读官方文档或参加慕课网(https://www.imooc.com/)的相关课程。