搭建vue项目框架及安装常用插件

livezsw

已于 2022-08-24 15:59:46 修改

阅读量411

点赞数

分类专栏： vue 知识总结文章标签：前端 javascript 开发语言

于 2022-08-23 16:44:29 首次发布

本文链接：https://blog.csdn.net/qq_41111677/article/details/126480272

版权

vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

知识总结

3 篇文章 0 订阅

订阅专栏

1.安装node环境 Node.js 查看版本node-v

安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org

2.搭建vue环境 cnpm install -g @vue/cli

3.创建vue项目 vue create demo

4.运行项目 cd demo npm run serve

5.安装常用插件添加完代码之后重新install

package.json中添加


"dependencies": {
    "vue": "^2.6.14",
    "vuex": "^3.0.0",
    "vue-router": "^3.0.1",
    "axios": "^0.21.4",
    "element-ui": "^2.15.6",
    "less": "^4.1.3",
    "less-loader": "^5.0.0"
  },

main.js

import Vue from 'vue'

//router
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import router from '@/router'

// Vuex
import Vuex from 'vuex'
Vue.use(Vuex)
import store from '@/store'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

// import '@/assets/css/base.less'
// import '@/assets/css/eleCommon.less'
// import '@/assets/css/project.less'
// import '@/assets/icon/iconfont.css'
// import '@/utils'
// import '@/utils/api'

import App from '@/App'
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})