vue安装初始化项目

第一步：搭建环境

有环境的直接第二步，环境使用了 nvm管理vue的版本
因为开发过程发现别人的vue项目版本参差不齐，自动拉下来项目发现总启动报错，用nvm可以快速切换到对方的vue支持版本。

一、安装nvm

传送门，安装过的忽略即可

二、安装vue脚手架启动项目

1、nvm安装vue 当前nvm使用的node版本是v10.24.1

npm install -g @vue/cli

安装完成之后报错：
You are using Node v10.24.1, but this version of @vue/cli requires Node ^12.0.0 || >= 14.0.0.
Please upgrade your Node version.
显而易见，需要更新node版本，直接用nvm安装了新版本

nvm install v12.0.0    
#  继续安装vue
npm install -g @vue/cli

然后就可以使用了
安装后还显示了一个这个

                                                            │
   │      New major version of npm available! 6.14.12 → 9.6.3      │
   │   Changelog: https://github.com/npm/cli/releases/tag/v9.6.3   │
   │               Run npm install -g npm to update!   

让更新npm的，暂时没这个需要，不更新

2、创建一个vue项目

vue create xxx-service

选择Default ([Vue 2] babel, eslint)
后端来学习前端，怎么简单怎么来，直接选默认的即可了。
3、 启动项目

$ cd ysdq-bms
 $ npm run serve

完成，后面就可以自己玩了

常见问题

npm --save和–save -dev的区别

npm --save和–save -dev的区别
npm install vue-router 等价 npm install vue-router --save
–save是默认的，例如 npm i jquery 和 npm i jquery --save 是等价的
–save是代表着项目上线时所依赖的包
–save-dev 代表着是项目打包或者开发时候需要的包，实际上线的时候所不依赖的
两者可以在package.json里面查看

关闭eslint

主要是用idea中有红色波浪线，点击左上角Intellij IDEA -Preference，搜索Eslint点击disable即可

项目中常用依赖

注意是vue2项目

# 安装路由
npm i vue-router@3.5.1
# 安装element-ui
npm i element-ui@2.15.13
# axios
npm i axios@0.24.0
# vuex
npm i vuex@3.6.2

vue2项目流程分析

main.js

整个项目的入口文件
执行npm run serve会直接执行main,js文件。
验证方法：
main.js 其他全部注释，启动项目打开控制台看到执行了。

// import Vue from 'vue'
// import App from './App.vue'
// import ElementUI from "element-ui";
// import router from "./router/index.js";
//
// //设置为 false 以阻止 vue 在启动时生成生产提示。
// Vue.config.productionTip = false
// Vue.use(ElementUI);
//
// new Vue({
//   render: h => h(App),
//   router
// }).$mount('#app')
console.log(666);

分析main.js内容

// 引入Vue 这个是模块引入 实际引入的是一个js文件 在vue文件下package.json中的module属性即dist/vue.runtime.esm.js
import Vue from 'vue'
// 引入App组件 根组件
import App from './App.vue'
//设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false
// 创建Vue实例对象 new Vue()--创建对象 -同时要传递参数 ,参数也是一个对象用{}里面是配置 即配置对象
//1、render: h => h(App) 将App组件放入容器中 
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

import Vue from ‘vue’

1、实际引入的是一个js文件 在vue文件下package.json中的module属性即dist/vue.runtime.esm.js
2、这个是一个残缺的js文件没有模版解析器
比如这个Vue里面不能解析模版
这里抛出一个疑问，挂载的到底是哪个容器上的app?
vue main.js中app绑定的是index.html还是App.vue中？

import Vue from 'vue'
new Vue({
  el:'#app',
  template:'<h1>HHHHHHH<h1/>'
})

而引入全部的js文件可以解析

import Vue from 'vue/dist/vue'
new Vue({
  el:"#app",
  template:"<h1>HHHH</h1>"
})

以上#app是挂载到public/index.html中的容器中的
3、引入残缺的vue如何挂载到容器上？
render是一个函数，Vue自动帮我们调用，而有一个参数是createElement函数，它能帮我们创建具体元素编写内容，通过打印到控制台看到是createElement 是function即函数

const vm = new Vue({
  // render: h => h(App)
  render(createElement){
    console.log(typeof createElement)
  }
});
# render就是配置内容的
const vm = new Vue({
  // render: h => h(App)
  render(createElement){
    // console.log(typeof createElement)
    return createElement('h1','asfasf')
  }
});
# render没有用到this 那么可以写成箭头函数
render:(createElement)=>{
    return createElement('h1','asfasf')
}
# 一个参数 括号可以去掉,里面只有一个语句，还可以去掉{} 
render:createElement=>createElement('h1','asfasf')
# createElement 用h代替
render:h=>h('h1','asfasf');
# 最后用的是组件那么直接传入组件即可
render: h => h(App)

分析创建Vue对象

1、创建vue对象 同时用el挂载到app容器上

const vm = new Vue({
  el:"#app",
  render: h => h(App),
});

2、拿到Vue对象使用$mount(‘#app’)挂载

const vm = new Vue({
  render: h => h(App),
  router
});
vm.$mount('#app')
# 当然也可以这样简写
new Vue({
  render: h => h(App)
}).$mount('#app')