https://segmentfault.com/blog/wangjihong

安装nodejs与NPM

下载nodejs的LTL版本,并安装

https://nodejs.org/en/

执行node -v检查版本

npm在安装nodejs的时候会自动安装,使用以下命令更新npm到最新版本

npm -g install npm
npm -v

安装淘宝npm

npm install cnpm -g --registry=https://registry.npm.taobao.org

安装vue-cli手脚架

cnpm install -g vue-cli

cmd进入你想创建工程的目录,指定工程目录,就可以开始创建工程了

vue init webpack project-dir
  • Project name (project-dir)  如果不改就默认使用目录名,当作工程名,工程名允许出现大写字母
  • Project description (A Vue.js project)  工程描述
  • Author (maobuji <16770864@qq.com>) 工程作者
  • Vue build (Use arrow keys): 有两个选项,推荐第一个

Runtime + Compiler: recommended for most users  运行加编译

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

  • Install vue-router? (Y/n)   安装vue-router
  • Use ESLint to lint your code? (Y/n)

Standard (https://github.com/standard/standard)

Airbnb (https://github.com/airbnb/javascript)

none (configure it yourself)

  • Set up unit tests (Y/n)

Jest

Karma and Mocha

none (configure it yourself)

  • Setup e2e tests with Nightwatch? (Y/n)

Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)

Yes, use NPM

Yes, use Yarn

No, I will handle that myself

基本上一路回车下来,就可以了。

编译运行项目

cnpm install

npm run dev

如果install不成功,可以尝试运行  cnpm rebuild node-sass

执行run dev以后系统就会启动了,config/index.js文件中,提供了启动端口。默认是8080

访问http://localhost:8080 就可以看到欢迎页面了。

springboot+VUE(一)的更多相关文章

  1. springboot+vue前后端分离,nginx代理配置 tomcat 部署war包详细配置

    1.做一个小系统,使用了springboot+vue 基础框架参考这哥们的,直接拿过来用,链接https://github.com/smallsnail-wh/interest 前期的开发环境搭建就不 ...

  2. SpringBoot+Vue+WebSocket 实现在线聊天

    一.前言 本文将基于 SpringBoot + Vue + WebSocket 实现一个简单的在线聊天功能 页面如下: 在线体验地址:http://www.zhengqingya.com:8101 二 ...

  3. Springboot vue.js html 跨域 前后分离 shiro权限 集成代码生成器

    本代码为 Springboot vue.js  前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ mybaits+maven+接口 前端页面:html + ...

  4. .gitignore 标准模板 -适用于SpringBoot+Vue项目 -Idea+VSCode开发

    .gitignore 标准模板 -适用于SpringBoot+Vue项目 node_modules/ target/ !.mvn/wrapper/maven-wrapper.jar ### STS # ...

  5. SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题

    原文链接:https://segmentfault.com/a/1190000012879279 当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理 ...

  6. SpringBoot + Vue + nginx项目部署(零基础带你部署)

    一.环境.工具 jdk1.8 maven spring-boot idea VSVode vue 百度网盘(vue+springboot+nginx源码): 链接:https://pan.baidu. ...

  7. 使用Docker部署Spring-Boot+Vue博客系统

    在今年年初的时候,完成了自己的个Fame博客系统的实现,当时也做了一篇博文Spring-boot+Vue = Fame 写blog的一次小结作为记录和介绍.从完成实现到现在,也断断续续的根据实际的使用 ...

  8. SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(五): 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑

    (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p ...

  9. SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(一): 搭建基本环境、整合 Swagger、MyBatisPlus、JSR303 以及国际化操作

    相关 (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y- ...

  10. Springboot+Vue实现仿百度搜索自动提示框匹配查询功能

    案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...

随机推荐

  1. java 使用post 请求php接口

    遇到问题:php无法正常接收post参数,原因php只有当content-type为content-type为application/x-www-data-urlencoded和multipart/f ...

  2. Lock详解

    在JDK1.5后,并发包里新增了Lock接口以及其实现类来实现锁功能,它提供了与synchronized关键字类似的锁功能,但它需要手动开启.关闭锁.虽然看起来没有synchronized方便,但它可 ...

  3. Lambda表达式中的GroupBy使用的正确姿势

    本实例适用于:将记录中的数据进行分组得到一个一对多模型数据Model 案例中的Model 注:UserDetailes 包含User的信息和其所属部门信息 需求:将UserDetailes 的记录分组 ...

  4. 关于JS的一些案例,setInterval,动态图片

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  5. VMware vSphere Client 语言切换

      vpxclient -locale en_US 英语 vpxclient -locale zh_CN 汉语 vpxclient -locale ja 日语 vpxclient -locale de ...

  6. 12 个 JS 技巧

    1. 过滤唯一值 ES6 引入了 Set 对象和延展(spread)语法…,我们可以用它们来创建一个只包含唯一值的数组. 复制代码     const array = [1, 1, 2, 3, 5, ...

  7. spring事务详解(三)源码详解

    系列目录 spring事务详解(一)初探事务 spring事务详解(二)简单样例 spring事务详解(三)源码详解 spring事务详解(四)测试验证 spring事务详解(五)总结提高 一.引子 ...

  8. java练习-判断字符串是否都是数字

    方法1: package everyDayPratise; public class IsAllNumber { public static boolean method1(String s) { i ...

  9. css 小坑

    1.display:inline-block 内容上下移动 原因:inline-block 默认对齐方式是底部对齐 方法:加一个 vertical-align:top; 属性 把垂直对齐方式改为顶部

  10. ELK + Filebeat 日志分析系统

    ELK + Filebeat 日志分析系统 架构图 环境 OS:CentOS 7.4 Filebeat: 6.3.2 Logstash: 6.3.2 Elasticsearch 6.3.2 Kiban ...