安装node.js

第一步

下载安装node.js

第二步

在安装目录

如:D:\Program Files\nodejs

添加两个文件夹

node_global和node_cache

第三步

以管理员的身份打开终端运行以下命令

//设置全局模块安装路径为 "D:/Program Files/nodejs/node_global"
PS C:\Users\23340> npm config set prefix "D:/Program Files/nodejs/node_global"
//设置全局缓存路径为 "D:\Program Files\nodejs\node_cache"
PS C:\Users\23340> npm config set cache "D:\Program Files\nodejs\node_cache"
//查看全局安装的包及其版本信息
PS C:\Users\23340> npm list -global

第四步

配置系统变量

变量名:NODE_PATH

变量值:D:\Program Files\nodejs\node_modules

配置用户变量

D:\Program Files\nodejs\node_cache

D:\Program Files\nodejs\node_global

第五步

安装淘宝镜像

安装命令:

npm config set strict-ssl false

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

第六步

安装全局Vue

npm install -g vue

安装webpack模板

npm install webpack -g

npm install webpack-cli -g

webpack -v

第七步

安装脚手架vue-cli

npm install vue-cli -g

vue --version

安装Vue-router

npm install vue-router -g

错误解决

set-ExecutionPolicy RemoteSigned

常用配置文件

设置淘宝镜像
npm config set registry https://registry.npm.taobao.org


npm install webpack --save-dev
npm install webpack-dev-server --save-dev


npm i element-ui -S

npm install [email protected] --save-dev --force
npm install [email protected] --save-dev --force


npm i vue-router -S

【excel表格工具】
 npm i -S exceljs file-saver luckyexcel

//引入Vue
import Vue from "vue";
//引入App
import App from "./App.vue";
//引入VueRouter
import VueRouter from "vue-router";
//引入路由器
import router from "./router";
//统一接口api文件夹里面全部请求函数
//统一引入
import * as API from "@/api";
// 三级联动组件--全局组件
import TypeNav from "@/components/TypeNav/index.vue";
// 分页器--全局组件
import Pagination from "@/components/pagnation/index.vue";
//引入MockServer.js----mock数据
import "@/mock/mockServe";
import { Button, MessageBox } from "element-ui";
// 映入仓库
import store from "@/store";
// 引入swiper样式
import "swiper/css/swiper.css";
// 第一个参数组件的名字,第二个参数哪一个组件
Vue.component(TypeNav.name, TypeNav);
Vue.component(Pagination.name, Pagination);
Vue.component(Button.name, Button);
// 使用路由插件
Vue.use(VueRouter);
//ElementUI注册组件的时候，还有一种写法，挂在原型上
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
// 引入图片懒加载
import img from '@/components/images/wx_cz.jpg'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: 'dist/error.png',
        loading: img,
        attempt: 1
    })
    //引入表单校验插件
import "@/plugins/validate";

//关闭Vue的生产提示
Vue.config.productionTip = false;
//创建vm
new Vue({
    el: "#app",
    // 注册全局事件总线
    beforeCreate() {
        Vue.prototype.$bus = this;
        Vue.prototype.$API = API;
    },
    render: (h) => h(App),
    // 配置路由
    router: router,
    // 注册仓库
    store: store,
});