18.vue-cli学习2.x①

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情

一、npm配置淘宝镜像

1.npm config set registry https://registry.npm.taobao.org

2.检查获取淘宝镜像（返回registry.npm.taobao.org成功）：

npm config get registry

3.更新回原有的npm镜像（registry.npmjs.org）

npm config set registry https://registry.npmjs.org

安装cnpm:

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

2.使用：cnpm install xxx

修改npm包的路径：

1.设置 npm 缓存路径:

npm config set cache "O:\nodereps\node_cache"

2.设置 npm 全局包下载路径:

npm config set prefix "O:\nodereps\node_global"

验证npm安装：

1.npm config list

存在：cache = "O:\nodereps\node_cache"

prefix = "O:\nodereps\node_global"

ok;

二、安装脚手架：

• 1.卸载脚手架：

npm uninstall -g vue-cli (2.0)

npm uninstall -g @vue/cli  (3.0)

• 2.安装脚手架：

  2.0版本：

  npm install -g vue-cli（vue-cli@2.x， -g安装的就都放在了O:\nodereps\node_globa）

  3.0版本：

  npm install -g @vue/cli

  拉回低版本：（2.0版本）

  npm install -g @vue/cli-init

• 2_1:创建项目

  vue init webpack my-project

  vue create my-project

• 3.项目结构：

  my-project--------------------------->项目名 
  
  --build--------------------------->用来使用webpack打包的依赖 
  
  --config---------------------->用来整个项目配置的目录 
  
  --node_modules----------->用来管理项目中的使用依赖 
  
  --src------------------->用来书写vue的源代码的[※] 
  
  +assets ------------>用来存放静态资源[※] 
  
  +components------->用来书写vue的组件[※] 
  
  +router------------->用来配置项目中的路由[※] 
  
  +App.vue--------->项目中的根组件[※] 
  
  +main.js---------->项目中的主入口[※] 
  
  --static--------------->其他静态
  
  +.gitkeep------>git上传服务器时，文件夹为空是不会上传的，有了这个文件可以上传空文件夹 
  
  --.babelrc------------>es6语法转es5语法 
  
  --.editorconfig------------>项目代码格式配置 
  
  --.gitignore--------------->git版本控制,忽略git版本上传的文件 
  
  --.postcssrc.js------------>css转换的配置 
  
  --index.html----------->项目的主页 
  
  --package.json-------->类似与pom.xml 依赖管理，不建议手动更改 
  
  --package-lock.json------->记录node_modules中安装的配置的真实版本，是对package.json的映射 
  
  --README.md------------->项目的阅读文件（项目的说明文件） 
  

• 4.axios:

  安装：npm install axios --save-dev

  然后：import axios from 'axios';（main.js引入）

  Vue.prototype.$https=axios;//修改内部的$http为axios;（main.js添加）

三、vue的一些使用：

• 1. vue 监听路由变化：

  watch:{ 
  
  $route:{ 
  
  handler(val,oldval){ 
  
  console.log(val);//新路由信息 
  
  console.log(oldval);//老路由信息 
  
  }, 
  
  // 深度观察监听 
  
  deep: true 
  
  } 
  
  } 
  

  在app.vue的created中加入下面代码，然后进行判断

   this.$router.beforeEach((to, from, next) => { 
  
   console.log(to); 
  
   next(); 
  
   }); 
  

• 2.路由跳转

  this.$router.push：跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

  this.$router.replace：跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面

  this.$router.go(n)：向前或者向后跳转n个页面，n可为正整数或负整数

• 3.组件获取父级的值：

  this.$parent(子组件)=this(父组件)

  that.$parent.$set(obj(修改的对象),修改的index,需要修改成什么样)

• 4.过去data-xx的值：

  :data-index='i' （存值） @click="del($event)"

  e.target.dataset.index='i' （获取）

四、vue click:@clickfun($event)

clickfun(e) { 

// e.target 是你当前点击的元素 

// e.currentTarget 是你绑定事件的元素 

//获得点击元素的前一个元素 

e.currentTarget.previousElementSibling.innerHTML 

//获得点击元素的第一个子元素 

e.currentTarget.firstElementChild 

//获得点击元素的下一个元素 

e.currentTarget.nextElementSibling 

//获得点击元素中id为string的元素 

e.currentTarget.getElementById("string") 

//获得点击元素的string属性 

e.currentTarget.getAttributeNode('string') 

//获得点击元素的父级元素 

e.currentTarget.parentElement 

//获得点击元素的前一个元素的第一个子元素的HTML值 

e.currentTarget.previousElementSibling.firstElementChild.innerHTML 

}

五、vue的动态更改变量

Vue.set(object,index,value)

object:要更改的数据源（数组或对象）

index：数据的索引（第几项）

value：修改后的值

六、router->index.js 路由参数：

mode:'history',这个可以去除默认的#

linkActiveClass: '',//是模糊匹配点击的是哪个路由

linkExactActiveClass: 'active',//是精准匹配点击的是哪个路由

七、打包：

在项目的根目录下执行命令（即存在package.json的层级）：

npm run build

注意vue_cli打包的项目必须在服务器上运行，无法双击打开。

打包成功后在目录中存在dlist目录，是vue_cli的项目生产目录，也是部署目录

可以通过nginx部署到本地过服务器上

八：runtime-compile 和 runtime-only 的区别：

runtime-compile

runtime-compiler(v1)

template->ast->render->vdom->ul(ast是抽象语法树)

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})

runtime-only

在html里面的template标签是 通过 vue-template-compile 扩展解析的。

runtime-only(v2)(性能高， 代码量少【vue实例里面不能存在template标签，要使用render】)

render->vdom->ul(页面实现步骤)

new Vue({

  el: '#app',

  render(h){  

     h=> createElement(App)

     1.createElement普通方法：createElement('标签',{标签的属性},['标签内的内容'])

     2.组件以用法：return h(App)

  }

}) 

九. 路径别名：

resolve: {

    extensions: ['.js', '.vue', '.json'],

    alias: {

      '@': resolve('src'),

      'assets': resolve('src/assets'),

    }

  },

 <img class="yong" slot="item-icon-active" src="~assets/img/tabbar/yong.png">

在html 里面使用时 需要 加上 ‘~’符号

js中使用   import TabBar from '@/components/tabbar/TabBar'

他们都是绝对路径

last:在vs code上安装vue

以管理员身份运行

执行：get-ExecutionPolicy，回复Restricted，表示状态是禁止的

执行：set-ExecutionPolicy RemoteSigned

选择Y

注意：一定要以管理员的身份运行,不是cmd窗口！