1.安装node.js

下载安装node.js，win7使用node.js v12版的（为目前通用，建议都是用这个版本），win10可以使用最新版本的。CLI至少要求v12版本的。

node-v12.22.10-x64.msi

安装完成后开启cmd，检验版本：

node -v

2.配置淘宝镜像

搜索npm淘宝镜像，加速后续包的下载，在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 project_name

注：

project_name为项目名称，请自定义创建

后续参数配置如下：

4.1.人工选择特性

4.2.选择以下两项特性

4.3.选择vue版本

4.4. 选择将包独立存放

4.5.选择保存以上配置，供以后使用

4.6. 安装完成后，按提示运行，访问首页面测试

5.安装外部包

5.1安装vant2

npm i vant@latest-v2 -S

5.2安装element-ui

npm i element-ui -S

5.3.安装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.element-ui按需引入

npm install babel-plugin-component -D

新建ElementUI.js：

import Vue from 'vue'
import { Button } from "element-ui"

Vue.use(Button)

6.3.Axios配置

新建Axios.js：

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配置

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')

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

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

8.路由配置修改

router/index.js修改如下：

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

Vue.use(VueRouter)

const routes = [
? //初始路由
? {
? ? name: '/',
? ? path: "/",
? ? redirect: {
? ? ? ? name: 'NotFound', //默认导向的路由名
? ? }
? },
? //未匹配到的路由默认导向这里
  { 
? ? path: '/:pathMatch(.*)*', 
? ? name: 'NotFound', 
? ? component: () => import('../components/Error.vue'),
? },
]

const router = new VueRouter({
? mode: 'history',
? base: '/web',
? routes
})

export default router

9.修改App.vue，增加默认样式

修改为如下：

<template>
? <div id="app">
? ? <router-view/>
? </div>
</template>

<style>
*{
  margin: 0; 
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  }
html{
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, Tahoma, "Microsoft Yahei","PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
  }
#app{
  width: 100%;
  height: 100%;
}
</style>

10.修改index.html配置

在public/index.html，需要修改如下属性：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

可变更项目标题与logo。

11.修改vue.config.js文件，发布配置

项目根目录下增加如下内容的vue.config.js：

module.exports = {
? publicPath: '/web/',
}

注：指定访问相对路径前缀为：根目录/web/下。目前项目都以web为访问前缀。比如：原访问地址为：http://www.demo.com/现在需要为http://www.demo.com/web。作用在于后续与后端结合，为避免跨域使用。

12.增加Error.vue，启动服务

删除views文件夹，为与vue3统一，所有组件放在components中，放置Error.vue ：

<template>
? <p>hello man</p>
</template>

在文件夹地址前加cmd，回车直接打开运行：

npm run serve

运行成功后，复制地址，在浏览器上查看。

13.定制化文件目录

13.1.在项目根目录下建立static文件夹

这里统一放置静态资源与文件。

13.2.在项目src下建立model文件夹

这里放置模板文件。

VUE2安装初始化步骤（2022）