VUE2初始化

1.安装node.js

下载安装node.js，win7使用node.js v12版的（为目前通用，建议都是用这个版本），win10可以使用最新版本的。CLI至少要求v12版本的。
node-v12.22.10-x64.msi
安装完成后打开cmd，检验是否下载成功以及版本号：

node -v

2.配置淘宝镜像

搜索npm淘宝镜像，替代npm 加速后续node_modules包的下载，在cmd中配置：

npm config set registry https://registry.npm.taobao.org

检验配置好的的淘宝镜像：

npm config get registry

3.下载CLI

搜索VUE CLI，安装下载 ：

npm install -g @vue/cli

4.使用CLI安装VUE2

在cmd中cd到需要建立项目的目录下，安装vue2:

vue create new-project （new-project为项目名称）

4.1手动选择配置项

4.2选择所需要配置项（空格选择）

4.3独立存放

5.安装外部包

5.1安装vant2

npm i vant@latest-v2 -S

5.2.安装Axios

npm install axios

6.包统一配置并按需引入

在src下新建plugins文件夹，里面一个文件就是一个包的配置文件，最后逐个引入main.js：

6.1.vant2按需引入

npm i babel-plugin-import -D

新建VantUI.js：

import Vue from "vue"
import { Button, Form, Field } from "vant"
 
Vue.use(Button)
Vue.use(Form)
Vue.use(Field)

6.2.Axios配置

import Vue from "vue";
import axios from "axios";
 
const url = "http://localhost/" //后台地址
axios.defaults.baseURL = url; //请求默认后台地址
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
Vue.prototype.$http = axios //后续请求使用
Vue.prototype.$http_url = url //全局后台地址

7.修改main.js配置

![在这里插入图片描述](https://img-blog.csdnimg.cn/d903f4bd47034e0a8acce439ab433a5b.png

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

7.2 使用了按需引入后，需要修改项目根目录下babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      "@babel/preset-env", { "modules": false }
    ]
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
      },
      'vant'
    ]
  ]
}

8.路由配置修改

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'home',
    meta:{
      title: '首页'
    },
    component: () => import('../views/index.vue')
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

9.修改vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  productionSourceMap: false,
  publicPath: '/',
  outputDir:process.env.outputDir,
  devServer: {
  },
})

10.运行

npm run serve