从0搭建vue2

Miege_

已于 2023-05-16 13:13:14 修改

阅读量109

点赞数

分类专栏： vue 文章标签： vue.js javascript webpack

于 2023-05-16 12:54:28 首次发布

本文链接：https://blog.youkuaiyun.com/qq_21295455/article/details/130703158

版权

vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何初始化和配置Vue项目，包括使用npm安装webpack、vue-cli，创建项目，设置vue.config.js文件进行代理配置，以及安装和使用element-ui、axios、vue-router和echarts等组件。同时，提到了sass和less的集成，以及nginx配置的检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始化package文件

npm init -y

安装webpack

npm i webpack -g
vue init webpack demo # 创建项目

局部安装vuecli

npm i -D vue-cli
npm i -D @vue/cli
npm i -D @vue/cli@4.5.15

查看安装的版本

npx vue -V

创建项目

npx vue create project-one
npx vue ui

文件：vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    open:true,
    inline: true,
    hot: true,
    host:'localhost',
    proxy: {
        '/api': {
            logLevel: 'debug',
            logProvider: ()=>console,// 在控制台显示访问日志
            target: 'http://1.116.64.64:5004/',
        }
    }
  }
})

vue2项目结构：
在这里插入图片描述

安装elementui

npm i element-ui -S

全部引用

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

按需引用element-ui
npm i babel-plugin-component -D

文件：babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

安装sass

npm i sass-loader@7 node-sass@4 -S

安装less

npm i less-loader@7 less@3 -S

安装图标

npm i -D font-awesome

安装axios

npm i axios -S

安装路由

npm i vue-router@3.5.3 -S

{
    path: '/home',
    // component: Home //路由预加载
    // component:()=>import('@/components/Home') //路由懒加载
    component: resolve => require(['@/components/Home'], resolve) //路由异步加载
}

安装echart

npm i -D echarts@4

检查一下nginx配置文件

nginx -t -c /xx/xx/conf/nginx.conf

安装已配置的包

// 只安装生产依赖的包
npm i --prodution
// 安装所有包，包括开发时依赖的包
npm i