Spring Boot+Vue从零开始搭建系统(一):项目前端_Vuejs环境搭建
2018-07-23 10:22
866 查看
- 进入Node.js官网:https://nodejs.org/en/,选择下载并安装Node.js。
2.验证Node.js是否安装好,在windows下,win+r召唤出运行窗口,输入cmd打开命令行窗口。输入
node -v即可得到对应的Node.js版本。
npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm,输入
npm -v可得到npm的版本。
输入以下命令
npm -g install npm,更新npm至最新版本。
安装cnpm
执行命令
npm install -g cnpm --registry=https://registry.npm.taobao.org,使用npm的国内镜像(npm 国内镜像 https://npm.taobao.org/)cnpm 命令代替默认的npm命令,增加依赖包加载速度且避免资源限制。
cnpm安装脚手架vue-cli
在命令行中运行命令
cnpm install -g vue-cli安装脚手架。
构建项目
将vue项目建在F盘的vue-workspace文件夹下,利用命令进入此目录。
在cmd中输入盘符F:回车即可进入F盘,
然后执行命令进入F:workspacesvue-workspace路径目录下,
再输入新建项目命令
vue init webpack javalsj-vue,执行后会自动生成vue项目。
安装项目依赖
上面脚手架自动生成的vue项目不能直接运行,需要加载上项目需要的依赖包才能运行。通过在cmd中使用命令先定位到项目所在路径目录下F:workspacesvue-workspacejavalsj-vue,然后输入命令
cnpm install安装项目所需的依赖包资源。
(博主在下载第三方开源项目运行的时候,有时会遇到奇怪的报错,然后通过先执行cnpm rebuild node-sass,后执行cnpm install解决,此步骤不是必须的。)
运行项目
项目准备完毕后,现在可以运行vue初始项目看效果了。
在cmd中,注意需要使用命令先定位到F:workspacesvue-workspacejavalsj-vue目录下,然后再输入命令
npm run dev来运行项目。
浏览器访问项目
项目运行成功后浏览器访问地址 http://localhost:8080 就可以查看效果啦。
备注
经过以上步骤完成了搭建vue的脚手架项目,可以简单看下项目目录,后续我们开发项目的时候只需在src目录下进行。
工欲善其事必先利其器,博主在开发Vue项目时,选择前端开发工具时试了
Sublime Text、
Webstom工具感觉不好用。然后问了一些朋友,经过尝试对比后最后还是选择了
Visual Studio Code工具作为前端开发工具,真心好用,开发工具下载官网地址:https://code.visualstudio.com/。 阅读更多
相关文章推荐
- Spring Boot / Spring MVC 入门实践 (一) :环境搭建与第一个项目
- SpringBoot项目实战--环境搭建
- fastdfs文件系统单机环境搭建和spring boot整合(已验证)
- Spring Boot / Spring MVC 入门实践 (一) :环境搭建与第一个项目
- Spring Boot / Spring MVC 入门实践 (一) :环境搭建与第一个项目
- 手把手教你从零开始搭建SpringBoot后端项目框架
- 前端框架Vue(15)——vue-cli 仿网易云音乐 Demo,环境搭建到开发 Vue 全家桶练手项目
- Springboot整合Dubbo - 项目创建和环境搭建
- maven环境搭建并运行springboot项目
- Windows环境搭建VUE前端开发环境-项目新建与调试
- SpringBoot项目环境的搭建
- 开发环境搭建, java web SSM SpringBoot+Mybatis SpringCloud等项目搭建
- Maven+SpringBoot环境搭建
- Vue.js 2.0环境搭建(mac机系统环境)
- SpringBoot + MyBatis + MySQL + Maven在Intellij IDEA下开发环境的搭建
- JavaWeb项目从零开始(1)--- 开发环境搭建
- Spring Boot 之开发环境与创建项目