vue------vue-cli2和vue-cli3安装和常识问题---知识积累

原创已于 2024-12-04 16:12:35 修改 · 置顶 · 690 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue常见知识

于 2019-03-12 09:18:33 首次发布

本文介绍了Vue CLI 2和3的安装步骤，包括如何在安装CLI 3后保留对2.x的支持。接着，讨论了Vue的一些核心特性，如事件绑定、生命周期钩子、组件和计算属性。还提到了自定义指令的规范，Vue中的MD5加密方法，以及如何使用axios进行数据请求，并简要提及页面的前进、后退操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

在这里插入图片描述
1.vue-cli2x的安装

指定版本安装：npm i element-ui@2.6.3

   npm install -g vue-cli
        
        vue init webpack my-project
        
        cd my-project
        
        npm install 
        
        npm run dev
        
        git commit -m "更新代码" -n   （这个是vscode提交不了的git上传）

1-1.vue-cli3的安装

 npm install -g @vue/cli
  
  vue --version   //查看是否安装成功

  vue create hello-world    //创建vue项目
 
  vue add element  // 安装element-UI
 
  npm install vue-router  // 安装vue-router，并且自己创建一个router.js

在这里插入图片描述

1-2.安装完Vue cli3 之后，还想用vue-cli2.x 版本
Vue CLI 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
//安装完后 就还可以使用 vue init 命令初始化项目模板了
vue init webpack my_project

在这里插入图片描述

  将项目clone到本地
         git clone   git@gitlab.com:USERNAME/PROJECTNAME.git  "test"  后边的是项目地址 和目录名，后边的test是目录名，可以不填，则本地默认创建和远程项目名字一样的文件名
    
       package.json文件可以手工编写，也可以使用npm init命令自动生成。   
    
       npm run build:test 这是打包的代码，test文件是改IP地址的
    
    安装插件就是：npm install vue-router --save-dev

删除vue中那个依赖文件(node_modules这个文件)

  npm install rimraf -g
  rimraf node_modules
  npm cache clean --force  //首先清除npm 缓存

2.vue中的一些特殊性能

  <button @click.once="add(1)"></button>

这个按钮就只是点击一次就不能点击了全是once的功能

v-bind的缩写是： <a v-bind:href="url">...</a>    缩写是  <a :href="url">...</a>

v-on的缩写是：<a v-on:click="doSomething">...</a>  缩写是  <a @click="doSomething">...</a>

3.vue的一些属性记录

methods: 方法（可放事件，点击事件）

data：是放数据的（json数组，数组）

beforeCreate 组件实例刚刚被创建,属性都没有

created 实例已经创建完成，属性已经绑定

beforeMount 模板编译之前

mounted 模板编译之后，代替之前ready *

beforeUpdate 组件更新之前

updated 组件更新完毕 *

beforeDestroy 组件销毁前

destroyed 组件销毁后

components 组件

template

@click.stop 阻止事件冒泡

@contextmenu.prevent 阻止事件默认行为

computed 计算属性

  npm i v-tap --save
    import vueTap from 'v-tap';
    Vue.use(vueTap);

4.自定义指令（必须是v-coloe 不可以使用:color）

 <p v-color="'red'">asdsad</p>
    directives:{
          
        color(el,binding){
       /*接受两个参数 el：绑定的元素    binding.value：属性值 */  
            el.style.color=binding.value
      
        }
      
    },

5.vue中md5加密

  npm install --save js-md5
    
    import md5 from 'js-md5';/*哪儿用哪儿引入*/
    md5（‘’）

6.请求数据的几种方法

  cnpm install axios --save

然后引入axios

  import axios from 'axios';

挂载到vue的原型上

  var http=axios.create({
      timeout:8000,
      headers:{'accId':'f105fc5e81fa453db2682351dd17b423','token':'9a75e13d58bfb8e545529d1e15b624cb',"Content-Type":"application/json;charset=UTF-8"}, /*设置请求头*/
      baseURL
    })
    
    Vue.prototype.$axios = http;		/*$axios自己可以随便设置  假设定为$axios  下面调用就是this.$axios*/

7.回退和前进：

router.go(-1)

this.$router.go(-1)  //在methods这个方法里写的

前进：

router.go(1)