先下载nodejs，官网地址：

下载 | Node.js 中文网 ()/download/确认nodejs安装是否成功cmd下输入node -v，查看是否能够正确打印出版本即可，然后再输入npm -v，查看是否能够正确打印出版本即可，这个npm就是一个软件包管理工具，就和linux下的apt软件安装差不多，一般安装nodejs时，npm会自动安装。

然后为了解决下载速度的问题，需要安装node.js淘宝镜像加速器（cnpm），这样的话下载会快很多。在cdm中输入以下代码

# -g就是全局安装npm install cnpm -g

安装vue-cli

cnpm install vue-cli -g#测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpackvue list

创建一个基于webpack模板的vue应用程序，全程no到底

#这里的myvue为文件名vue init webpack myvue

初始化并运行

cd myvuenpm installnpm run dev

ctrl+c停止运行vue应用程序，输入y确定停止。

安装webpack，webpack是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6等都作为模块来处理和使用。

#安装webpacknpm install webpack -g#安装webpack-clinpm install webpack-cli -g

安装完之后再测试是否安装成功。

#测试webpack是否安装成功webpack -v#测试webpack-cli是否安装成功webpack-cli -g

使用webpack打包，先建立一个目录modules，在这个目录下新建两个js文件，分别是hello.js和main.js。

hello.js文件：

exports.sayHi=function (){document.write("<h1>huyannan</h1>");}

main.js文件：

var hello = require("./hello");hello.sayHi();

然后在主目录（webpack_study）下新建webpack.config.js文件

module.exports={entry: './modules/main.js',output:{filename:'./js/bundle.js'}}

最后在终端运行webpack命令即可打包成功。

安装vue-router路由，vue-router是一个插件包。在项目目录下的命令行输入以下命令。

npm install vue-router@3.1.3 --save-dev #或者cnpm install vue-router@3.1.3 --save-dev

在main文件中引用vue-router

在main文件中显示声明使用VueRouter

如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：

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

vue-router使用总结（重点！！！）：

Content.vue文件和Main.vue文件都是组件

router下的index.js文件，类似后端的xml配置文件，配置相应的访问路径和对应的组件

import Vue from 'vue'import VueRouter from 'vue-router'import Content from "../components/Content";import Main from "../components/Main";//安装路由Vue.use(VueRouter);//配置导出路由export default new VueRouter({routes: [{//路由路径path: '/content',name: 'content',//跳转的组件component: Content},{//路由路径path: '/main',name: 'content',//跳转的组件component: Main}]});

main.js文件相当于主文件，程序的唯一入口

APP文件则是作为view前端显示的。

<template><div id="app"><h1>Vue-Router</h1><router-link to="/main">首页</router-link><router-link to="/content">内容页</router-link><router-view></router-view></div></template><script>export default {name: 'App'}</script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style>

在项目中运行npm run dev，并访问其路径。

建一个工程从零开始

Vue+ElementUI

创建工程

创建一个名为hello-vue的工程vue init webpack jello-vue安装依赖， vue-router、element-ui、sass-loader和sass四个插件

#进入工程目录cd hello-vue#安装vue-routern npm install vue-router --save-dev#安装element-uinpm i element-ui -S#安装依赖npm install# 安装SASS加载器cnpm install sass-loader@7.3.1 sass1.26.5 --save-dev#启功测试npm run dev

npm命令解释

npm install moduleName：安装模块到项目目录下

npm install -g moduleName：-g的意思是将模块安装到全局，具体安装到磁盘哪个位置要看npm config prefix的位置

npm install -save moduleName：–save的意思是将模块安装到项目目录下， 并在package文件的dependencies节点写入依赖，-S为该命令的缩写

npm install -save-dev moduleName:–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

创建登录页面

目录结构

说明：

assets：用于存放资源文件components：用于存放Vue功能组件views：用于存放Vue视图组件router：用于存放vue-router配置

在views目录下创建首页视图Main.vue组件

<template><h1>首页</h1></template><script>export default {name: "Main"}</script><style scoped></style>

在views目录下创建登录页面视图Login.vue组件（来自element-ui），代码如下

<template><div><el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box"><h3 class="login-title">欢迎登录</h3><el-form-item label="账号" prop="username"><el-input type="text" placeholder="请输入账号" v-model="form.username"/></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" placeholder="请输入密码" v-model="form.password"/></el-form-item><el-form-item><el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button></el-form-item></el-form><el-dialog title="温馨提示" :visible.sync="dialogVisiable" width="30%" :before-close="handleClose"><span>请输入账号和密码</span><span slot="footer" class="dialog-footer"><el-button type="primary" @click="dialogVisible = false">确定</el-button></span></el-dialog></div></template><script>export default {name: "Login",data(){return{form:{username:'',password:''},//表单验证，需要在 el-form-item 元素中增加prop属性rules:{username:[{required:true,message:"账号不可为空",trigger:"blur"}],password:[{required:true,message:"密码不可为空",tigger:"blur"}]},//对话框显示和隐藏dialogVisible:false}},methods:{onSubmit(formName){//为表单绑定验证功能this.$refs[formName].validate((valid)=>{if(valid){//使用vue-router路由到指定界面，该方式称为编程式导航this.$router.push('/main');}else{this.dialogVisible=true;return false;}});}}}</script><style lang="scss" scoped>.login-box{border:1px solid #DCDFE6;width: 350px;margin:180px auto;padding: 35px 35px 15px 35px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;box-shadow: 0 0 25px #909399;}.login-title{text-align:center;margin: 0 auto 40px auto;color: #303133;}</style>

在router目录下创建一个名为index.js的vue-router路由配置文件。

import Vue from 'vue'import Router from 'vue-router'import Main from "../views/Main";import Login from '../views/login';Vue.use(Router);export default new Router({routes:[{path: '/main',component: Main},{path: '/login',component:Login}]})

编写 APP.vue

<template><div id="app"><router-view></router-view></div></template><script>export default {name: 'App',}</script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style>

在main.js中配置路由

import Vue from 'vue'import App from './App'import router from "./router"//import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.config.productionTip = falseVue.use(router);Vue.use(ElementUI)/* eslint-disable no-new */new Vue({el: '#app',router,render:h=>h(App)//ElementUI})

测试npm run dev

说明： 如果出现错误: 可能是因为sass-loader的版本过高导致的编译错误 ，可以去package.json文件中把sass-loder的版本降低，也有可能是你安装的是node-sass，高版本的node已经弃用node-sass改用sass，主要看报错内容修改相应的版本 。

博主第一次安装的是node-sass所以报错了，后面是在网上找到的解决方案。

(1条消息) 高版本node导致 Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.异常_一gi我里giao的博客-CSDN博客/ouyangchangxiu/article/details/123373118?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~CTRLIST~default-1-123373118-blog-122272092.pc_relevant_multi_platform_whitelistv1&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2~default~CTRLIST~default-1-123373118-blog-122272092.pc_relevant_multi_platform_whitelistv1&utm_relevant_index=1

安装axios和vue-axios

cnpm install axios vue-axios -s

main.js引用 Axios

import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)

如果觉得《前端vue node npm webpack环境搭建从零开始》对你有帮助，请点赞、收藏，并留下你的观点哦！