Vue学习笔记（1）-关于安装

node和npm的安装

1. node自带npm 搜索下载安装合适的版本
2. 安装好之后 打开查看node版本 node -v 比如下图这样
   
   3.查看npm版本 npm -v 比如下图这样
   
   也可以下载vscode 带node的版本 可以直接在编辑器中操作终端（本人就是如此，很方便）

vue-cli安装和新建vue项目

1.npm install -g vue-cli （-g表示全局安装）
2.vue init webpack vue-project-name （初始化vue项目，项目名称自定义）
3.之后回车 会出现一些信息需要填写 按照实际填写就行（关于eslint 根据个人代码习惯决定是否需要）
4.建好之后验证下项目是否创建成功 cd到项目目录 然后执行npm run dev
5.初始化好之后 在浏览器打开对应的地址 默认是http://localhost:8080/ 如果端口被占用 可以在config/index.js 中修改host和port 然后重新npm run dev即可 能打开页面就说明创建成功了

vuex安装配置

1. 项目根目录运行 npm install vuex -S
2. 在src/main.js配置vuex

//引入store 
import store from './store'//此处新加的
new Vue({
  el: '#app',
  store,//此处新加的
  components: { App },
  template: '<App/>'
})

3.src目录新建store文件夹,新建5个js 此处把vuex分成了5个文件

内部具体使用逻辑以后在分享

axios 安装

1.根目录下 执行 npm install axios -S
2.在src/main.js配置 axios

//引入axios
import axios from 'axios'//此处新加的
Vue.prototype.$axios = axios;//此处新加的
new Vue({
  el: '#app',
  store,
  axios,//此处新加的
  components: { App },
  template: '<App/>'
})

具体使用以后在分享

vue-router安装

1.vue-router是一个插件包，需要用npm来进行安装的。如果采用vue-cli构建初始化项目会提示安装，也可以自己使用命令安装：npm install vue-router --save
2.用vue-cli构建项目之后，在src/router/index.js文件中 配置如下

// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依赖
import Router from 'vue-router'
// 引入页面组件，命名为HelloWorld
import HelloWorld from '@/components/HelloWorld'
// Vue全局使用Router
Vue.use(Router)
// 定义路由配置
export default new Router({
  routes: [                //配置路由，这里是个数组,放置路由对象
    {                        //每一个都是一个对象
      path: '/',            //路径
      name: 'HelloWorld',        //路由名称，
      component: HelloWorld     //上面import引入的对应的组件模板
    }
  ]
})

3.在main.js中也需要引入router

// 引入vue框架
import Vue from 'vue'
// 引入根组件
import App from './App'
// 引入路由配置--此处新加的
import router from './router'
// 关闭生产模式下给出的提示
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,//引入路由配置--此处新加的
  store,
  axios,
  components: { App },
  template: '<App/>'
})

至此 vue全家桶需要的工具和依赖大致安装完成 具体的使用 下次再分享