目录
一、Vue-cli安装
1.1 什么是Vue-cli
Vue CLI是一个基于Vue.js的官方脚手架工具，用于自动生成vue.js+webpack的项目模板，快速搭建Vue.js项目的开发环境。它提供了一套交互式的命令行界面，可以帮助开发者初始化项目、配置构建工具、管理依赖等。Vue CLI集成了一些常用的开发工具和最佳实践，使得开发者可以更加高效地开发Vue.js应用程序。
1.2 安装Vue-cli
在cmd窗口输入如下命令，验证vue安装是否成功，注意：这里的V是大写。如果成功会打印版本号
vue -V1.3 使用Vue-cli构建项目
在需要保存的文件路径中打开cmd命令窗口，创建项目存放目录，运行如下命令：
vue init webpack 项目名
最后出现 Project initialization finished! 就下载好了：
二、SPA项目
2.1 导入、运行SPA项目
找到之前构建的spa项目的文件路径，在编程软件中导入：
1. 回到我们的cmd命令窗口输入该命令
2. 输入 npm run dev 命令运行
打开此网页即可运行：
2.2 vue项目结构说明
2.3 .什么是*.vue文件
*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。这三个部分分别代表了 html,js,css。
<template>
<div>
...
</div>
</template><script>
export default {
name: 'App'
}
</script>2.4 基于SPA项目完成路由
在构建spa项目的时候它已经做了一个默认欢迎界面，接下来我们只需要根据它的格式做一个自定义组件。
1. 在src下的components 创建自定义组件。
Hone.vue
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
msg: 'Welcome to 网站首页'
}
}
}
</script>
<style>
</style>
About.vue
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'About',
data () {
return {
msg: 'Welcome to 云村小威 个人网站'
}
}
}
</script>
<style>
</style>
2. 定义路由与配置路由路径
在router文件夹下面的index.js进行添加路由与配置路由路径：
完整示例：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}, {
path: '/Home',
name: 'Home',
component: Home
}, {
path: '/About',
name: 'About',
component: About
}]
})
3. 定义触发路由的按钮
找到Aue.js定义路由触发的按钮:
<template>
<div id="app">
<img src="./assets/vue.png" style="width: 350px;height: 250px;"><br>
<router-link to="/Home">首页</router-link>
<router-link to="/About">关于本站</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
4. 运行测试
2.5 基于SPA项目完成嵌套路由
1. 示例：准备在About.vue组件中嵌套其他组件
<template>
<div>
<h1>{{ msg }}</h1><br />
<router-link to="/AboutMe">关于我</router-link>
<router-link to="/AboutWebsite">关于本站</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'About',
data () {
return {
msg: 'Welcome to 云村小威 个人网站'
}
}
}
</script>
<style>
</style>
2. 自定义需要嵌套的组件
AboutMe.vue
<template>
<div>
<img src="../assets/自拍照.png" style="width: 200px;height: 200px;"/>
</div>
</template>
<script>
export default {
name: 'AboutMe'
}
</script>
<style>
</style>
AboutWebsite.vue
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
name: 'AboutWebsite',
data() {
return {
msg: '关于本站无需多言，帅说明了一切...'
}
}
}
</script>
<style>
</style>3. 效果演示
