使用vue-cli(脚手架)搭建项目的基本流程

基本配置流程:

1,安装vue脚手架 npm i @vue-cli -g (新电脑只需要装一次)
2, 初始化一个vue项目: vue create 项目名称
3, 运行项目npm run serve ,能够看到页面就成功初始化了一个项目
4, 建立项目的目录结构: src:源代码; package.json: 下载的包和插件的文件、以及运行的命令之类 ;node_modules: 第三方包存储目录, src下的所有目录都需要知道。
5, 建立view 文件夹,放页面组件, commponents放页面内的一些组件或者公共组件。API放获取数据的一些地址或者方法,util文件夹内放一些工具方法(request.js、日期转换函数,数据格式的转换函数....)

组件使用:

1、写组件
2、在你想要使用这个组件的地方引入这个组件
3、在components属性下注册这个组件
4、在模板结构中使用这个组件

父组件给子组件传值:(绑定自定义的属性)
1、在父组件中给子组件绑定自定义属性,
2、子组件中通过props接收,并且就能使用

子组件给父组件传值:(监听自定义的事件)
1、通过自定义事件传递

vuex(兄弟组件传值)

1、下载 npm i vuex -S
2、新建store/index.js
3、写入以下代码

import Vue from "vue"
import Vuex from "vuex"
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

const config = {
    // 本地持久化
    plugins: [createPersistedState()],
    state:{
        
    },
    getters:{
        
    },
    mutations:{
    
    },
    actions:{

    },
    modules:{
    }
}

export default new Vuex.Store(config)

4、vue本地持久化,安装vuex-persistedstate

npm i vuex-persistedstate

你可能感兴趣的:(使用vue-cli(脚手架)搭建项目的基本流程)