VUE从入门到放弃(第一天)——整体流程

先想想一个项目,vue项目是从什么到什么,然后再什么的?那是什么呢?

  1. 搭建 ( vue-cli)
  2. 代码内容
  3. 运行
  4. 封装
  5. 成品

一.搭建(脚手架vue-cli)

首先node.js,npm,vue-cli(脚手架)一定要有,这里不细讲。装就完事了。

进想放的文件夹,vue init webpack XXXVue(项目名称,随你取),配置:

  1. Project name (my-vue)?————————-项目名称(My-Vue)?

  2. Project description (A Vue.js project)————————-项目说明(Vue.js项目)?

  3. Author?————————-作者?

  4. Runtime + Compiler: recommended for most users———————-运行时编译器:推荐给大多数用户
  5. Install vue-router? (Y/n)————————-安装vue路由

  6. Use ESLint to lint your code? (Y/n)(启动校验??就是查查你的代码错误,不开也行,开也行。)

  7. ?Set up unit tests (Y/n) 敲n回车既可 ( 单元测试, 个人觉得不安装选择n )

  8. ?Setup e2e tests with Nighwatch?(Y/n) ( e2e测试,个人觉得不安装选择n )

  9. ?Should we run npm install for you after the project has been created? (recommended) (use arrow Keys) 选使用npm

在项目夹的命令行:npm install(安装依赖,以后就可以为所欲为的npm i xxx了)

XXXXVue文件夹中多出一个node_modules文件夹。

二.代码内容()

目录:↑

  1. dist是经过npm run build打包过后的文件,文件非常小。dist正常无法直接打开需要通过服务器,云服务器也行,本地用phpstudy啥的也行。(后面打包的时候再提一下)
  2. package.json和config:都是配置文件
  3. assets:图片呀,资源呀,这些都存放在这里。
  4. node_modules:npm后的资源,都在里面,想要的ui库直接npm i xxx库。
  5. src/components:组件存放处。先要啥组件(例:helloworld.vue),往这一放,就可以调用了
  6. src/router:路由,
  7. build:启动打包文件。

三.运行(npm run dev)

先运行命令: npm run dev

加载,搞定!

四.封装(npm run build)

dist是经过npm run build打包过后的文件,文件非常小。dist正常无法直接打开需要通过服务器,云服务器也行,本地用phpstudy啥的也行。

也可以去封装做成一个H5 app。使用云打包即可。

五.成品

  1. 通过放置在服务器,云服务器也行,本地用phpstudy啥的也行。
  2. 通过云打包,变成一个app。
  3. 其他的还没接触到。

VUE从入门到放弃(项目全流程)————VUE的更多相关文章

  1. vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...

  2. vue 快速入门 系列 —— 侦测数据的变化 - [vue api 原理]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue api 原理] 前面(侦测数据的变化 - [基本实现])我们已经介绍了新增属性无法被侦测到,以及通过 delete 删除数据也不会 ...

  3. vue项目搭建通过vue-cli包括组件路由的使用实现基本的前端项目全流程

    github上项目地址:https://github.com/comonly/javaweb_blog/tree/master/blog_diverse_frontend 具体搭建流程及实现方式:ht ...

  4. Vue开发项目全流程

    只记录vue项目开发流程,不说明怎样安装node和vue-cli等 确认安装 安装好node之后,可查看是否安装成功,有版本则安装成功.输入node -v 查看vue是否安装成功,有版本则安装成功.输 ...

  5. 用intellij Idea加载eclipse的maven项目全流程

    eclipse的maven项目目录 全流程 加载项目 打开intellij Idea file -> new -> module from existing Sources  选择.pom ...

  6. 初版storm项目全流程自动化测试代码实现

    由于项目需要,写了版针对业务的自动化测试代码,主要应用场景在于由于业务日趋复杂,一些公共代码的改动,担心会影响已有业务.还没进行重写,但知识点还是不少的与大家分享实践下.首先,介绍下整个流处理的业务流 ...

  7. vue自学入门-1(Windows下搭建vue环境)

    本人是一个喜欢动手的程序员,先跑起来个HelloWorld,增加感性认识,这三篇入门文章,花了不到一个小时,从网上找资料,程序跑通后,整理出来的,有的新人可能去哪找资料,运行代码都不知道,分享出来,大 ...

  8. 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. Vue.js——60分钟browserify项目模板快速入门

    概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

随机推荐

  1. springboot搭建通用mapper

    对于搭建一个小项目自己测试玩如果采用传统的SSM框架配置起来太过于繁琐,使用springboot简化配置再搭配通用mapper简直不要太方便,话不多说,直接上代码. 首先是pom文件,直接去sprin ...

  2. BeanUtils开发包的使用

    对内省技术有了一定的了解之后,我们就可以来学习一下BeanUtils开发包的使用了. 我们先假设一个情景,有一个JSP文件,如果要将该JSP文件中表单数据封装到Servlet文件应该怎么办?此时方法显 ...

  3. Mac忘记MySQL root密码解决方法(亲测有效)

    重置MySQL root密码 重置MySQL root用户的密码: 1)新建一个文本文件sql.txt,写入修改用户密码的SQL语句. MySQL 5.7.6及更高版本写这句: ALTER USER ...

  4. Fortigate防火墙常用命令

    命令结构 #config 对策略,对象等进行配置 #get  查看相关对象的参数 #show 查看配置文件 #diagnose 诊断命令 #execute  常用的工具命令,如ping treacer ...

  5. Spring Cloud Zuul的动态路由怎样做?集成Nacos实现很简单

    一.说明 网关的核心概念就是路由配置和路由规则,而作为所有请求流量的入口,在实际生产环境中为了保证高可靠和高可用,是尽量要避免重启的,所以实现动态路由是非常有必要的:本文主要介绍实现的思路,并且以Na ...

  6. 设计模式(C#)——04原型模式

    推荐阅读:  我的CSDN  我的博客园  QQ群:704621321       在软件开发过程中,我们习惯使用new来创建对象.但是当我们创建一个实例的过程很昂贵或者很复杂,并且需要创建多个这样的 ...

  7. spring加载bean流程解析

    spring作为目前我们开发的基础框架,每天的开发工作基本和他形影不离,作为管理bean的最经典.优秀的框架,它的复杂程度往往令人望而却步.不过作为朝夕相处的框架,我们必须得明白一个问题就是sprin ...

  8. 在windows7系统下如何查看及升级powershell到3.0版本

    最近在学习.net core web api 开发,用到了Mysql.Data.EntityFrameworkCore框架,在根据数据库表生成对应实体类时提示必须先升级本机powershell到3.0 ...

  9. 骑士精神(IDA*)

    题目描述 输入格式 第一行有一个正整数T(T<=10),表示一共有N组数据.接下来有T个5×5的矩阵,0表示白色骑士,1表示黑色骑士,*表示空位.两组数据之间没有空行. 输出格式 对于每组数据都 ...

  10. 【CF1137C】 Museums Tour 拆点+缩点

    https://codeforc.es/contest/1137/problem/C # 题意 给你n个点,每个点有k天博物馆开放时间的安排表. 有m条单向道路,走过一条边需要一个晚上,经过后就是第二 ...