环境搭建

第1步：安装Node.js

去node.js官网下载windows对应版本，安装即可。

验证node.js是否安装成功：

node -v

npm -v

第2步：解决npm安装第三方模块很慢问题，建议使用cnpm淘宝镜像

官网地址：https://developer.aliyun.com/mirror/NPM?from=tnpm


# 全局安装cnpm这个工具

# -g 表示全局安装，一次安装，永久使用

npm install -g cnpm --registry=https://registry.npm.taobao.org

第3步：安装vue脚手架工具


# -g 表示全局安装

cnpm install @vue/cli -g

第4步：创建vue项目


# 先进入目标目录

vue create vue-study

# 在创建项目的过程中，可能会涉及到vue版本的选择，建议选择2.0

# 如果还需要选择包管理工具，建议使用 npm

第5步：启动vue项目


# 进入项目的根目录

npm run serve

# 在浏览器中通过本地服务来访问vue项目

# 自己配置一个start命令

npm start

如果当前代码没有node_modules包

执行cnpm install可以根据package.json文件进行重装

项目目录结构说明

1、node_modules

是整个vue程序运行所必须的依赖，不能随便改

当你分享代码时，node_modules不用给别人

2、package.json

是整个应用程序的说明文件

它记录当前应用程序所需要的第三方包

它还指定项目若干操作命令

3、public

是本地静态资源服务目录

4、src

是源码目录，工作中写代码的地方

main.js是应用程序的入口文件

App.vue 可根组件、容器组件

路由

作用：用于实现单页面应用程序

第1步：安装vue-router


cnpm install vue-router -S

# -S 表示安装完成时，同步把这个包记录在package.json文件'dependencies'中

# -D 表示安装完成时，同步把这个包记录在package.json文件'devDependencies'中

# -g 表示全局安装这个包，一次安装，永久使用

第2步：在src根目录，新建一个router.js的文件，代码如下


# 引入VueRouter类，并注册

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

# 引入路由匹配所需要的组件

import Home from './pages/Home.vue'

import Find from './pages/Find.vue'

# 创建路由实例，并抛出

export default new VueRouter({

  routes: [

    { path: '/home', component: Home },

    { path: '/find', component: Find }

  ]

})

第3步：在main.js中挂载路由


import router from './router.js'

new Vue({

  router,  

  render: h=>h(),

  el: '#app',

})

第4步：在App组件中使用<router-view></router-view>来承载路由匹配成功的组件。

状态管理

作用：1、实现组件之间的数据 2、用于实现缓存

提示：在vue应用程序中，vuex不是必须的，是可选的

1、安装


cnpm install vuex -S

2、注册并创建Store

在src根目录创建 store.js 文件


import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {},

  mutations: {}

})

3、在main.js中挂载store


import store from './store'

new Vue({

  store

}).$mount('#app')

4、在组件中使用store


this.$store.state.msg 访问store中共享的数据

# 修改store数据

this.$store.state.msg = 'new val' // 不建议这么做，因为在devTools中没法调试

this.$store.commit('mutations方法', payload)

devTools的安装

1、下载这个包，放在你喜欢的任何目录下

https://github.com/arcliang/Vue-Devtools-

2、打开谷歌浏览器，点击设置、打开设置

3、在设置页面，点击“扩展程序”，并开启“开发者模式”

4、选择“加载已解压的扩展程序”，选择刚刚你下载的devTools/chrome文件夹

5、关闭谷歌浏览器，就有了devTools这个调试工具

axios

简介：它是基于Promise封装 axios().then().catch().finall()

特点：可以用浏览器环境，也可用于Node.js环境

安装：cnpm install axios -S

原理：客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据啦。(注：要跨域请求数据，在配置文件里设置代理，需要在根目录自己创建一个vue.config.js，在里面写配置。)


module.exports = {

  devServer: {

    proxy: {

      "/api": {

        target: "http://10.36.138.122:9999", //目标路径，别忘了加http和端口号

        changeOrigin: true, //是否跨域

        ws: true,

      },

    },

  },

};

文档：https://www.npmjs.com/package/axios

Vue项目环境搭建