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. django 获取当前访问的URL

    next_url = request.path_info print(next_url) print(request.get_full_path()) //打印出全路径(路径和参数) print(re ...

  2. Java网络编程与NIO详解4:浅析NIO包中的Buffer、Channel 和 Selector

    微信公众号[黄小斜]作者是蚂蚁金服 JAVA 工程师,目前在蚂蚁财富负责后端开发工作,专注于 JAVA 后端技术栈,同时也懂点投资理财,坚持学习和写作,用大厂程序员的视角解读技术与互联网,我的世界里不 ...

  3. Hey Future!

    我是蒟蒻QWQ 本人一大蒟蒻 弱的一批 希望大家见谅

  4. Mysql主从复制原理及搭建

    ## Mysql主从复制原理 主从复制是指一台服务器充当主数据库服务器,另一台或多台服务器充当从数据库服务器,主服务器中的数据自动复制到从服务器之中.对于多级复制,数据库服务器即可充当主机,也可充当从 ...

  5. python所有的标准异常类:

    异常名称 描述 BaseException 所有异常的基类 SystemExit 解释器请求退出 KeyboardInterrupt 用户中断执行(通常是输入^C) Exception 常规错误的基类 ...

  6. junit单元测试框架

    一般我们写代码总想对方法测试一下结果,就存在这些问题: 1.如果方法需要测试,都需要在main方法上调用 2.目前的结果都需要我们人工对比 所以就需要用到 junit 进行测试: 1·下载 junit ...

  7. unity_数据结构(常见数据结构及适用场景)

    常见的数据结构: 1.Array: 最简单的数据结构 特点:数组存储在连续的内存上.数组的内容都是相同类型.数组可以直接通过下标访问.优点:由于是在连续内存上存储的,所以它的索引速度非常快,访问一个元 ...

  8. mysql where、group by、having

    今天重新温习一遍mysql的知识 先来讲讲where.group by.having group by :是将记录中的数据,按照条件进行分组: having:是将分组后的数据加上条件筛选,区别于whe ...

  9. 记一次CentOS7-MySQL排坑历程

    一.报错及起因 今天在 CentOS7 中安装了 mysql5.7,然后为了测试数据库环境是否配置成功,便写了个基于 mybatis+Spring 的 java web 程序连接操作 mysql 数据 ...

  10. C 扩展对闭包特性的支持

    今日听说某君批评 C 语言说它[输入一个参数返回一个函数]很困难. 例如在 Python 中,你可以 def addn(n): def addx(x): return n + x return add ...