搭建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目录下创建路由文件
然后在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;