一、首先我们得有安装环境
所以我们得下载一个Node,最好是v10版本以上,它自带两个模块工具,可以在命令行执行。一个是node,用来运行ECMAscript;另一个则是命令行的包下载工具——npm。
下载node之后我们就可以通过命令行命令node -v
和 那npm -v
查看两个工具的版本了、
1、npm的简单应用
npm常用的三种安装状态:
1)-global 全局安装,一般用于安装工具,能在命令行执行的
2)–save-dev (简写:-D)一般用于安装开发依赖,项目上线后就不需要的包
3)–save (简写 -S) 一般用于安装项目依赖,项目在上线后也就是在服务器中依然需要这些包
总结:
npm下载:npm i 模块名称[@版本] [-g|--save-dev]
npm卸载:npm uninstall 模块名称 [-g]
npm初始化:npm init -y
不能在中文文件夹名称中执行这个命令
将package.json移动到服务器中,安装所有依赖模块:npm i
如果在服务器中进行npm i
的时候,发现加了–save-dev的包也安装上了,这时候可以考虑修改npm的配置来实现正常的安装:npm config set production true
,就可以了
npm是国外的镜像管理工具,所以在国内使用起来下载速度一般都会很慢,所以我们通常会通过两种方法来解决
1)安装cnpm使用淘宝的镜像地址,然后我们就可以愉快的使用cnpm来代替npm了
安装命令:npm install -g cnpm – registry=https://registry.npm.taobao.org
然后就可以使用cnpm了
2)使用网速管理工具nrm,它可以改变npm的镜像地址
先安装nrm,命令行运行npm i nrm -g
(这是缩写,完整是npm install nrm -global
);
然后通过nrm --version
查看版本以确定是否安装成功
C:\Users\Tom>nrm --version
1.2.1
安装成功可以通过nrm test 查看所有公开出来的镜像地址,查看结果如下
C:\Users\Tom>nrm test
npm ---- 833ms
yarn --- Fetch Error
cnpm --- 793ms
* taobao - 148ms
nj ----- Fetch Error
npmMirror 2225ms
edunpm - Fetch Error
!插入图片描述](https://img-blog.csdnimg.cn/20200725094010110.png)
带*的为当前选用的镜像地址,可以通过命令行执行 npm use 镜像地址
来更换当前地址
2、安装脚手架:
cnpm install @vue/cli -g
3、创建项目:
vue create vue-study
4、启动项目:
进入项目目录,执行 npm run serve
,启动一个本地开发服务器
经过上述,我们已经建立一个基本的项目结构了
二、路由配置
单页面应用程序 vs. 多页面应用程序
单页面应用程序,实际是通过路由对组件进行管理的,URL发生变化,组件切换,就形成了视觉上页面切换。
实际上,在单页面应用程序中,只有一个index.html页面,其它一切皆组件。
1、如何安装集成路由?
(1)安装vue-router
cnpm install vue-router -S
(2)在src根目录创建 router.js文件,编码如下
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from './views/Home.vue'
const router = new VueRouter({
routes: [
{ path: '/home', component: Home }
]
})
export default router
(3)在main.js中进行挂载
import router from './router.js'
new Vue({
router,
render: h=>h(App)
}).$mount('#app')
(4)编写router-link的跳转链接(代码写在App.vue)
router-link是vue-router的内置组件,它可以触发URL的改变。
在路由系统,URL变化,所匹配的组件也发生变化,那么变化后的组件应该在哪里进行显示呢?
<router-link to='/home' tag='span' active-class='on'>首页</router-link>
<router-link to='/news' tag='span' active-class='on'>新闻中心</router-link>
<router-link to='/user' tag='span' active-class='on'>关于我们</router-link>
(5)使用router-view来展示URL所匹配成功的组件(代码写在App.vue)
<router-view></router-view>
2、嵌套路由
嵌套路由,一般情况工作中,到两级足够了。尽量不要超过两级。
router-link的to永远写的都是完整路径(端口号后端的全部路径)
3、路由跳转
声明式路由跳转 ,方便实现高亮样式
编程式路由跳转 this.$router.push() / replace() / back()
4、路由命名与路由别名
别名,是一个路径,可以被访问
路由命名,只是一个名字,可以用于路由跳转
5、路由路由与传参
在router.js里配置路由,代码如下:
{ path: '/detail/:abc/:title', component: Detail }
在编程式路由跳转,代码如下:
this.$router.push('/detail/'+id)
在详情页面中,如何接收动态参数?(this.$route.params对象里存储着参数),通过以下代码我们可以拿到key为id的值:
this.$route.params.id
6、两种客户端的路由模式
mode=‘hash’
缺点:URL中有一个 # 号,看上去怪怪的
优点:部署到服务器上时,单页面应用程序被刷新时不会发生404.
mode=‘history’
优点:URL中没有 #
缺点:部署到服务器上时,单页面应用程序被刷新时会发生404。要求后端或运维在服务器(Nginx)上做重定向处理。
7、路由懒加载
1、语法:
//import Home from '@/views/Home.vue'
const Home = ()=>import('@/views/Home.vue')
作用:应用程序中组件进行异步加载,节省应用程序初始化的性能。
结合 Vue的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。
三、Vuex状态管理
1、简介
状态:数据。状态管理,数据管理。
作用:1、实现组件之间的数据共享 2、用于缓存
2、安装
cnpm install vuex -S
新建src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({})
export defaut store
在main.js中进行挂载:
import store from '@/store/'
new Vue({
store
}).$mount('#app')
在页面组件中,可以使用 this.
s
t
o
r
e
.
s
t
a
t
e
/
t
h
i
s
.
store.state / this.
store.state/this.store.commit()
3、devtools安装
下载 Vue-Devtool- 这个包
打开谷歌浏览器 - 设置 - 扩展程序 - 打开开发者模式 - 加载已解压的扩展包 - 重启浏览器 - F12(Vue)调试选项
4、axios
是一个http调接口的工具
它是基于Promise封装,非常方便地解决回调问题。
它不仅仅可以用在客户端,还可以用node.js服务端。
5、modules概念
作用:把vuex根store,拆分成多个子store(module),以方便开发和维护。
使用方法:
1、在 new Vuex.Store({modules: {m1, m2, m3}})
2、子store(module)就是一个普通的对象
export default {
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {}
}
3、组件中如何使用子store(modules)的数据和方法呢?
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
computed: {
...mapState('m1', ['msg']),
...mapGetters('m2', ['total'])
},
methods: {
...mapMutations('m3', ['addTodo']),
...mapActions('m3', ['ajaxCnode'])
}