热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Vue、J2ee>001:Vue项目的创建过程

使用命令行的方式,通过vue-cli的脚手架进行模板下载打包:1、安装node.js环境,查看node版本并确认是否安装成功【node-v】2、安装WebStorm开发工具(使用W

使用命令行的方式,通过vue-cli的脚手架进行模板下载打包:

1、安装node.js环境,查看node版本并确认是否安装成功【node -v】
2、安装WebStorm开发工具(使用WebStorm来开发Vue项目)
3、在WebStorm中直接引入Vue.js文件就可以进行开发测试
  a、和使用eclipse进行开发无二差别
  b、但是可以在WebStorm中可以时间查看开发情况,不用象eclips还需要启动tomcat服务器,WebStorm内存类似tomcat的服务器
4、以上只是Vue.js的简单使用,还不属于Vue项目。

5、创建Vue项目(通过脚手架下载模板项目,在模板项目基础之上进行开发)
  a、需要node环境,上面已经安装
  b、需要vue-cli脚手架,用于打包、测试、部署...Vue项目
    安装命令【npm install -g vue-cli】,查看版本号及是否安装成功【vue -V】
  c、Vue模板的下载,有多个模板可供下载,常用模板【webpack】
    下载命令【vue init webpack 项目名称(不能有大写字母存在)】
    安装过程(参数都有默认值,也可以修改):
      01、项目名称提示
      02、描述
      03、作者
    04、是否使用vue-roter路由,如果不使用可以不安装
    05、是否需要ESLint,一般都需要
    06、是否需要单元测试库,如果是基于功能测试可以不需要
    07、与06类似
    08、使用什么方式下载,也可以手动下载
    09、如果上面选择了手动下载会直接退出。

    10、如果选择手动下,会直接退出花前月下给出手动下载的步骤
      cd 项目名称
      npm install(or if using yarn: yarn)
      npm run lint -- -- fix (or for yarn: yarn rum lint -- fix)
      npm run dev

      上面的意思是需要进入到项目目录文件夹下进行操作
      使用npm install命令进行下载,这个比较耗时
      运行npm run lint -- -- fix
      进行打包、并且运行【npm run dev】,完成之后会给出访问地址,在浏览器中使用给出的地址进行访问

 

以下是部分图片


推荐阅读
  • 前言:原本纠结于Web模板,选了Handlebars。后来发现页面都是弱逻辑的,不支持复杂逻辑表达式。几乎要放弃之际,想起了Javascript中ev ... [详细]
  • 前言:原本纠结于Web 模板,选了Handlebars。后来发现页面都是弱逻辑的,不支持复杂逻辑表达式。几乎要放弃之际,想起了Javascript中eval函数。虽然eval函 ... [详细]
  • 网络请求模块选择——axios框架的基本使用和封装
    本文介绍了选择网络请求模块axios的原因,以及axios框架的基本使用和封装方法。包括发送并发请求的演示,全局配置的设置,创建axios实例的方法,拦截器的使用,以及如何封装和请求响应劫持等内容。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
  • 面试经验分享:华为面试四轮电话面试、一轮笔试、一轮主管视频面试、一轮hr视频面试
    最近有朋友去华为面试,面试经历包括四轮电话面试、一轮笔试、一轮主管视频面试、一轮hr视频面试。80%的人都在第一轮电话面试中失败,因为缺乏基础知识。面试问题涉及 ... [详细]
  • loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件,也就是说它会把打包过程中所有遇到的 ... [详细]
  • npmrunbuild后dist文件夹下面直接浏览器打开index.html,css和js的路径都不正确。放到跟目录下就正常了,iis上同样只能在根目录下。我项目的目录如下: ... [详细]
  • React 小白初入门
    推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ... [详细]
  • npminstall-Dbabelcorebabelpreset-envbabelplugin-transform-runtimebabelpolyfillbabel-loader ... [详细]
  • 1.码云上根据需求创建项目;2.进入项目——克隆下载 选择复制SSH3.clone码云上的项目到本地:在相关目录(如A)下运行终端,执行指令:gitclone复制的SSH地址;  ... [详细]
  • Vue cli2.0 项目中使用Monaco Editor编辑器
    monaco-editor是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与VisualStudioCode功能几乎相同。在项目中可能会用带代码编 ... [详细]
  • Node.js详细安装及环境配置
    1、下载安装根据自己电脑系统及位数选择,我这里选择windows64位.msi格式安装包(官网:https:odejs.orgzh-cndownload).msi和.zip格式区别 ... [详细]
  • 技术周报·2021-05-07-小编推荐向现代Javascript转型原文标题:Publish,ship,andinstallmodernJavaScriptforfaste ... [详细]
  • 这篇“Webpack是怎么工作的”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大 ... [详细]
author-avatar
davidwzw2009413
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有