美文网首页
搭建vue3.0项目及下载常用插件流程

搭建vue3.0项目及下载常用插件流程

作者: C_razy | 来源:发表于2020-09-11 11:30 被阅读0次

    1.安装vue-cli3.0以上版本脚手架工具

    npm install -g @vue/cli

    2.创建项目工程

    vue create hello-world
    安装好之后cd项目根目录,运行项目npm run serve.

    3.下载一些常用的插件

    (1)scss或者less,这里我用scss
    npm install sass-loader node-sass --save

    <style lang="scss">
    $color = red;
    </style>
    

    (2)vue-router是必不可少的
    cnpm install vue-router
    接着在scr目录下创建路由文件

    router.png
    然后在index.js里配置路由
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    // 引入新建的vue文件
    import index from '@/components/index'
    
    Vue.use(VueRouter);
    
    const routes = [
        {
            path: '/',
            name: 'index',
            component: index,
            meta: {
                showTab: true
            }
        },
       {// 商城
            path: '/store',
            name: 'store',
            component: () => import('@/components/store'),
            meta: {
                showTab: true
            }
        },
    ];
    
    const router = new VueRouter({
        mode: 'history',
        routes
    });
    export default router
    
    

    接着在main.js里引入路由

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    
    Vue.config.productionTip = false
    
    new Vue({
        router,
      render: h => h(App),
    }).$mount('#app')
    

    (3)安装axios,qs

    cnpm install axios
    cnpm i qs
    

    main.js里引入

    import qs from 'qs';
    import axios from "axios";
    
    Vue.prototype.$axios = axios;
    Vue.prototype.$qs = qs;
    

    相关文章

      网友评论

          本文标题:搭建vue3.0项目及下载常用插件流程

          本文链接:https://www.haomeiwen.com/subject/roevektx.html