开始之前需要确保自己的电脑上有
- node.js环境(npm包管理器)
- Node.js <—点击链接下载,一直下一步。
- vue-cli 脚手架构建工具
- npm install -g @vue/cli
1、在cmd里通过vue-cli创建脚手架,格式:vue create 项目名
脚手架介绍:
node_modules:放置项目依赖的地方
public:放置一些共用的静态资源,打包上线的时候,public文件夹里面资源原封不动打包到dist文件夹里面
--pubilc/index.html是一个模板文件,作用是生成项目的入口文件
src:程序员源代码文件夹
--assets文件夹:经常放置一些静态资源(图片),assets文件夹里面资源webpack会进行打包为一个模块(js文件夹里面)
--components文件夹:一般放置非路由组件(或者项目共用的组件)
--pages文件夹:放置路由组件
--router文件夹:配置路由
App.vue 唯一的根组件
main.js 入口文件【程序最先执行的文件】
babel.config.js:babel配置文件
package.json:看到项目描述、项目依赖、项目运行指令
package-lock.json: 缓存性文件(各种包的来源)
README.md:项目说明文件
2、脚手架下载下来的项目稍微配置一下
2.1:运行代码后,自动打开浏览器
在package.json文件中serve后加上--open
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
2.2关闭eslint校验工具,不然浏览器控制面板会经常爆红
创建vue.config.js文件:需要对外暴露
module.exports = {
lintOnSave:false,
}
3、确认项目结构:上中下 ----上下是非路由组件、中间部分是路由组件
2个非路由组件|四个路由组件
两个非路由组件:Header 、Footer
路由组件:Home、Search、Login(没有底部的Footer组件)、Register(没有底部的Footer组件)
4、写好非路由组件之后在App.vue里面进行三件套:
1:引入组件 (以header为例)
import HeaderVue from './components/Header.vue';
2:注册组件,在export default { }里,和data同级
components: { HeaderVue, }
3:使用组件
<HeaderVue></HeaderVue>
5、安装路由和配置路由组件
npm install --save vue-router@3 (也可以用淘宝镜像cnpm,vue2用@3)
--save:可以让你安装的依赖,在package.json文件当中进行记录
5.2创建路由组件【一般放在views|pages文件夹】
5.3在router文件夹 配置路由,配置完四个路由组件,(还要给首页路由组件添加一个重定向)
// 专门用于创建整个项目的路由器
import Vue from 'vue'
import VueRouter from 'vue-router'
//使用插件
Vue.use(VueRouter)
//引入组件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
//配置路由
export default new VueRouter({
//配置路由
routes: [{
name: 'shouye',
path: '/home',
component: Home,
meta: { show: true }
},
{
name: 'xiangqing',
// 如何指定params参数可传可不传?只需在路由path后的占位符后加'?'
path: '/search/:keyword?',
component: Search,
meta: { show: true }
},
{
name: 'denglu',
path: '/login',
component: Login,
meta: { show: false }
},
{
name: 'zhuce',
path: '/register',
component: Register,
meta: { show: false }
},
//重定向,当页面加载后网址自动从/跳到/home,也就是上面的首页组件页面
{
path: '/',
redirect: '/home'
}
]
})
5.4在router文件夹里写完配置后,要在main.js里面引入和注册
import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from '@/router'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
// 注册路由(这里如果单词相同可以简写为一个,即 router,)
router: router,
}).$mount('#app')
6、两种组件的使用
<template>
<div id="app">
<!-- 路由组件三件套3:使用组件 -->
<HeaderVue></HeaderVue>
<br /><br />
<!-- 非路由组件使用 -->
<router-view></router-view>
<br /><br />
<FooterVue v-show="$route.meta.show"></FooterVue>
</div>
</template>
<script>
// 路由组件三件套1:引入组件
import HeaderVue from "./components/Header/Header.vue";
import FooterVue from "./components/Footer/Footer.vue";
export default {
name: "App",
// 路由组件三件套2:注册组件
components: {
HeaderVue,
FooterVue,
},
};
</script>
<style> </style>
6.1、路由组件的跳转
在代码中 路由的跳转就两种形式:
声明式导航(router-link:务必要有to属性) 和 编程式导航 push||replace
编程式导航更好用:因为可以书写自己的业务逻辑
// 声明式路由导航 , 在浏览器中router-link会转变为<a>标签, router-link == a
// 这里指当点击这个“a”标签时会跳转到 to 的那个组件,可以用params或query传参
<router-link to="/login">请登录</router-link>
// 编程式路由传参 goSearch
// 这里是添加点击事件,触发下面的this.$router.push,里面使用params或query传参
<template>
<div>
<button class="btn" @click="goSearch">搜一搜</button>
</div>
</template>
<script>
export default {
name: "Header",
methods: {
// 路由传递参数
goSearch() {
// 常用:对象传参
this.$router.push(
//如果只要跳转,就直接写this.$router.push("/跳转路径")就好了,传参就下面的);
{
name: "xiangqing",
params: { keyword: this.keyword },
query: { id: this.keyword.toUpperCase() },
},
//如果不加下面的成功或失败的回调,重复点击搜索按钮时控制面板会飘红,虽然是没有影响的。。。(治标不治本方法)
() => {},
() => {}
</script>
路由组件和非路由组件区别(引用别人写的):
- 非路由组件放在components中,路由组件放在pages或views中
- 非路由组件通过标签使用,路由组件通过路由使用
- 在main.js注册完路由,所有的路由和非路由组件身上都会拥有$router $route属性
- $router:一般进行编程式导航进行路由跳转
- $route: 一般获取路由信息(name path params等)
如果你用的样式是less而不是css,则要先安装以来:
cnpm i -save less less-loader@6
@6是选择版本,不写则默认最新,不过vue2用最新的版本可能不兼容
安装完后在组件的style标签的身上加上<script scoped lang="less">,不添加样式不生效