简易搭建一个vue项目环境

一、首先我们得有安装环境

所以我们得下载一个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.$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'])
}