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 



Logo

前往低代码交流专区

更多推荐