1. 首页
  2. IT资讯

vue项目入门,包含vue全家桶的教程

1. 下载vue-cli

在命令窗口(shift+右键)输入:

npm install -g @vue/cli

然后稍等片刻,之后在你想要的目录位置下开始创建vue项目,还是在命令窗口输入:

vue create youname

youName是你自己定义的项目名字(不能有大写字母),之后会出现
在这里插入图片描述
default是默认, Manually select features是手动设置,我选择的是手动设置,键盘的上下键可以进行选择,空格键是确认选中。
在这里插入图片描述
这是我选中的,看个人需求,之后

①. 选择ESLint + Prettier

 ESLint with error prevention only
 ESLint + Airbnb config
 ESLint + Standard config
 ESLint + Prettier

选择ESLint + Prettier。

② . 选择语法检查方式,

> to invert selection)
>(*) Lint on save   // 保存就检测
 ( ) Lint and fix on commit  //fix和commit保存

这里选择保存就检查。

③. 配置文件存放位置

 Where do you prefer placing config for Babel, ESLint, etc.?
 In dedicated config files // 独立文件放置
 In package.json //放package.json里

这里我选择In package.json。之后就可以一直 y下去了。
给大家看下我的项目结构:
在这里插入图片描述
components是主要页面,views写子组件。

2 .配置
首先把你需要的下载下来,因为创建项目的时候已经下载过vue-router和vuex了,下载只需要下载axios

npm install axios

下载成功,刷新下package.json,中会有版本信息
在这里插入图片描述

注意,当你定义一个变量或者组件,但是你没有使用,会报错,我们需要修改配置,在package.json的”rules”里添加

   "vue/no-unused-components": "off",
      "no-unused-vars": [
        0,
        {
          "vars": "all",
          "args": "after-used"
        }
      ]

①. vue-router

 新建一个新组件,然后去router下的index.js去注册
 ![在这里插入图片描述](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/438175658d3f410e9ed3aa6a314e8249~tplv-k3u1fbpfcp-zoom-1.image)

注意,配置中path的值是自定义的,可以与引入的名字不同,但是name和component最好与引入时的命名保持一致。
路由传参

//跳转传参
this.$router.push({path:'/model', query: { page: '1', code: '6666' }});  

//model组件接收
this.$route.query.code
this.$route.query.page

②. vuex

首先项目中的store就是vuex,在创建项目的时候已经自动配好了,我们直接用就好了。
教大家粗略的使用vuex,看个简单的保存数组吧

export default new Vuex.Store({

  state: {
    myarr:[],
  },
  mutations: {
    storeArr(state,myarr){//state就是上面的state,myarr是组件传来的
      state.myarr=myarr;
    },
  },
  actions: {
   
  },
  modules: {
  }
})

组件中:

 storeBtn:function(){
        this.$store.commit("storeArr",this.dataArr);
     },

这只使用了mutations,是同步的,想要异步执行就还得使用actions,
在这里插入图片描述
组件中:

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
      userPhone:'19999999999',
    }
  },
  methods:{
    storePhone:function(){
      this.$store.dispatch("asyncStore",this.userPhone)
    },
  }

}

如果想获取state中的值,可以用this.$store.state.phone;

③. axios
axios默认的是application/json,如果使用这种编码方式,那么传递到后台的将是序列化后的json字符串,我们发送的格式也不是对象,这就很不舒服。给大家看下我的笨方法,在main.js中


import axios from 'axios'
axios.defaults.transformRequest = [function (data) {
 let obj = ''
 for (let item in data) {
   obj+= encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'
 }
 return obj
}]

Vue.prototype.$axios=axios

发送请求:

    let data={a:1,b:2};
   this.$axios.post('/url',data).then((res)=>{ 
          console.log(res)
        })

这样就符合我的使用习惯了。

⑤.element-ui
第一步当然是下载了

npm install element-ui

对了,卸载就是把install改为uninstall
然后去main.js引入

import ElementUI from ‘element-ui’;
Vue.use(ElementUI);

用的时候可以去官网去c代码,放在自己的项目中就可以了

例: <el-button @click="dialogVisible = false">取 消</el-button>

地址:https://element.eleme.cn/#/zh-CN/component/dialog

④. 自定义方法
我的是与components同级新建个文件夹(util)
在这里插入图片描述
util中的util.js就是写方法的地方

export default {

  myutil:function(val){
      console.log(val);
  },

}

在main.js(全局)中引入,也可以在你使用的组件中单独引入

import util from './util/util.js'
Vue.prototype.util=util;

在组件中调用:

this.util.myutil(666);

最后奉上一些vue中有用的小知识

1.通过ref操作子组件的事件并传值,

父组件中
 <model  ref='openModel'  :receivedata="this.receivedata"></model>
 
 {this.$refs.openModel.openValue(true) //方法传值,}
子组件
 props: {  //通过prop传的值
    receivedata:Object,
  },
  
  methods:{ //通过ref传的值
    openValue(val){
        this.dialogVisible=val;
    },
  }

2.修改父组件或者根组件data的值

 this.$parent.isOpen=false;  //修改父组件的data
 this.$root.isOpen=true;  //修改根组件

3.保存vuex的state,使其刷新后不会消失

   
      if (sessionStorage.getItem("store")) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
      }
   
      window.addEventListener("pagehide",()=>{
          sessionStorage.setItem("store",JSON.stringify(this.$store.state))
      })

如果有哪些不对的地方,敬请指正。

0k,本文到此结束。最后提醒,请看下本人的昵称

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/203766.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code