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

2020-09-11  本文已影响0人  C_razy

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;
上一篇下一篇

猜你喜欢

热点阅读