vue项目搭建的整个需要插件（个人笔记）

最新推荐文章于 2024-05-16 01:51:55 发布

阿彤の小铃铛

最新推荐文章于 2024-05-16 01:51:55 发布

阅读量188

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_47295135/article/details/109516345

版权

使用第三方axios请求工具

    1.安装： cnpm install axios -S
    2.按需引入 import axios from 'axios'
    3.axios.get() 或者 axios.post() ,返回的是promise对象，需要通过.then获取成功回调，.catch获取失败的回调
    4.static中定义了一个list.json
    5.axios本地数据获取，axios.get("static/list.json").then((res)=>{console.log(res)})

element-ui

cnpm i element-ui -S  下载

引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

less下载

cnpm install less less-loader@4.1.0 --save-dev

vant排版下载

https://youzan.github.io/vant/#/zh-CN/quickstart 网站

cnpm install vant --save     下载

main.js引入
// vant引入
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

vue2.0模板搭建

### vue脚手架搭建 
    1.检查node版本 node -v  （如果没有，打开百度，搜node）
    2.检查npm版本 npm -v
    3.检查cnpm版本  淘宝镜像  cnpm -v (如果没有，执行 npm i -g cnpm --registry=https://registry.npm.taobao.org )
   使用淘宝镜像下载vue脚手架搭建工具，全局下载
 4. cnpm install vue-cli -g     
    5.vue init webpack test
        注意：eslint?选no    是否用npm下载  No，self 自己下载
    6.cd test
    7.cnpm install  补全依赖
     cnpm install    （cnpm i）
    8.运行  npm run dev

cnpm install -g @vue/cli  升级版本  4.0

vue3创建

vue3 create one
cnpm run serve启动

vuex持久化

cnpm install vuex-persist -S

vuex 搭建（准备工作）

    1. 下载依赖：cnpm install vuex -S
    2. 创建store文件夹,下面创建一个index.js

        里面做的事情：让vue使用vuex，默认导出一个store实例对象

        import Vue from 'vue'
        import Vuex from 'vuex'

        Vue.use(Vuex)

        export default new Vuex.Store({
            // 存储全局状态得
            state:{
                count:1000
            }
        })
    3. 在main.js中，引入store
        import store from './store'
    4. 在main.js 中，在vue实例中添加store对象
        实例：
        /* eslint-disable no-new */
        new Vue({
            el: '#app',
            router,
            store,  // 需要添加得
            components: { App:App },
            template: '<App/>'
        })

    5. 运行脚手架，在任意组件中 console.log(this.$store.state.count)