前后端分离之Vue（一）环境配置

Vue环境配置
前言：之前开发过微信小程序，感觉前后端分离的开发非常舒服，在线学习了下Vue这个前端框架，感觉与小程序的开发类似。动手搭建下前后端分离的项目，做个简单的Demo，体会下前后端分离的开发。写下这个系列也是记录自己在学习Vue的实践过程。Vue官网地址，可在线学习Vue的基本语法，了解Vue使用

一、软件安装
1.Node.js的安装
Vue环境运行依赖Node.js,首先安装Node.js.Node.js的官方网站https://nodejs.org/en/download/，选择对应的版本下载，本文的环境为Windows 64位，选择Windows Installer(.msi) 64安装，按照提示安装即可。安装结束可检测是否安装成功

node -v
2.安装npm
npm（node package manager），通常称为Node包管理器，顾名思义，主要功能就是管理node包，包括：安装、卸载、更新等等。这里采用淘宝的镜像，相比国外的镜像，下载速度能更快一点

npm install -g cnpm --registry=https://registry.npm.taobao.org
查看时候安装成功

3.安装vue-cli
npm install vue-cli -g
安装结束后，可用vue -V检测版本信息，查看是否安装成功

4.安装webpack
npm install webpack -g
二、创建Vue项目
采用的是Vue指令，生成Vue项目，创建的流程如下

在合适的文件夹位置选择以cmd窗口运行

//创建一个基于webpack新项目
1.vue init webpack first-vue
//Enter进入下一步，按照指示选择相应的选项
2.cd first-vue//进入生成的项目文件
3.npm run dev //以生产环境启动项目
4.http://localhost:8080 //浏览器登陆验证

生成的目录结构

 

三、界面成功效果

四、安装问题解决
1.-4048错误码，权限问题

npm ERR! path F:\2018毕业论文\vueproject\my-vue\my-first\node_modules\fsevents\n
ode_modules\getpass\node_modules
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall scandir
npm ERR! Error: EPERM: operation not permitted, scandir 'F:\2018毕业论文\vueproj
ect\my-vue\my-first\node_modules\fsevents\node_modules\getpass\node_modules'
npm ERR! { Error: EPERM: operation not permitted, scandir 'F:\2018毕业论文\vuep
roject\my-vue\my-first\node_modules\fsevents\node_modules\getpass\node_modules'
npm ERR! stack: 'Error: EPERM: operation not permitted, scandir \'F:\\2018毕业
论文\\vueproject\\my-vue\\my-first\\node_modules\\fsevents\\node_modules\\getpas
s\\node_modules\'',
解决办法：

直接用命令清理缓存就行，
npm cache clean --force
2.找不到modules错误

Module build failed: Error: Cannot find module 'stylus'

at Function.Module._resolveFilename (module.js:489:15)

at Function.Module._load (module.js:439:25)

at Module.require (module.js:517:17)

at require (internal/module.js:11:18)

at Object.<anonymous> (D:\project\sell\node_modules\_stylus-loader@2.5.1@sty

lus-loader\index.js:2:14)
解决办法，单独安装对应的模块

npm install stylus@latest
五、相关链接

Springboot整和Vue，实现前后台的分离，可参考

前后端分离之Vue（二）前后端整合http://blog.csdn.net/shenbug/article/details/79542717

前后端分离之Vue(三) Vue爬过的那些坑 http://blog.csdn.net/shenbug/article/details/79547171