前后端分离之Vue(一)环境配置
2018-03-13 16:46
429 查看
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\node_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 --force2.找不到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
相关文章推荐
- webstorm配置node运行环境(前后端分离,node服务端,vue客户端)
- 全栈开发:前后端分离配置篇(vue+webpack+mock+nginx+laravel)
- 前后端分离配置篇(vue+webpack+mock+nginx+spring)
- vue.js环境配置--vue-cli
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║初探SSR服务端渲染(个人博客二)
- springboot+vue的前后端分离与合并方案
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- 利用grunt-contrib-connect和grunt-connect-proxy搭建前后端分离的开发环境
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- vue2.0项目的环境配置以及有哪些的坑
- VUE环境配置
- nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
- 前端视角漫谈百度ueditor编辑器前后端分离配置
- 如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发
- 【VUE】关于VUE环境配置问题导致IIS发布之后Create与Mounted方法的执行问题
- vue开发环境准备-配置代理服务器网关
- FE - weex 开发之 配置 vue 与 vue - router环境
- Maven profile结合Maven AntRun Plugin实现不同环境配置文件分离打包
- 前后端分离之Vue(三)爬过得那些坑