Vue.js-项目开发

前端项目开发工具

向后端开发一样去开发前端应用，将大的功能模块拆分成模块化的组件分别开发，最后整合起来完成整体的功能。

Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。使其只能跑在浏览器上的JavaScript可以在操作系统上运行。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

  1. 下载
    1. node中文网
    2. 官网
  2. 安装
    1. 下一步安装法
  3. 验证
    1. 在cmd 下 node -v ,将显示版本号

npm.js

NPM: Node Package Manager，Node的包管理器。新版Node已经集成npm。

  1. 验证
    1. npm -v
  2. 更新npm到最新版本
    1. npm install npm@lastest -g
  3. 全局模式和局部模式
    1. 全局模式，全局包安装在root用户 的 {prefix}/lib/node_modules/ 目录 ({prefix} 一般是 /usr/ or /usr/local)
    2. 局部模式，它在父工作目录的 node_modules 文件夹中安装包
  4. 安装第三方包
    1. npm install jquery --save
      1. 在当前目录node_modules文件夹下
      2. --save 将包添加到项目的配置文件package.json里，新版Node，默认参数
    2. npm install jquery -g
      1. -g 安装到全局下
    3. npm install jquery@3
      1. @ 指定版本
    4. npm install jquery -D
      1. -D 开发环境需要的包， 生产环境不需要
  5. 更新包
    1. npm update jquery
  6. 查看已安装的包
    1. npm list
  7. 卸载
    1. npm uninstall jquery
  8. cnpm
    1. npm源是国外的，可以采用国内的cnpm
    2. cnpm 是淘宝团队维护的一镜像，这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步
    3. 命令参数、格式与npm一致
    4. npm install -g cnpm --registry=https://registry.npm.taobao.org
  9. 初始化一个新项目
    1. 在项目目录下执行，npm init， 会产生一个交互页面，选择参数
    2. 该命令会产生一个名为 package.json 文件，里面记录一些介绍信息和包依赖信息
    3. npm init -y 默认配置初始化项目

webpack

打包工具，把在后端开发的前端代码（JS、TypeScript、CSS、Less/Sass、png）打包成前端浏览器可以执行的JS代码。

前端开发的一些坑在于浏览器加载IS文件的时候屋从上到下，不存在模块化这样一个概念的.我们很正常的会把实现不同功代码保存在不同的JS文件中，这些IS文件之间传递变量只能通过定义全局变量，这样我们用到的JS文件越多，暴露的全局变量就越多，越容易出现变量被覆盖的隐患.（如果所有js文件都星自己写的还好，但是我们通常都是会引用别人的JS文件来开发）
node.js出现之后我们的JS文件可以直接跑在操作系统上了，并且在node.js中支持模块化的JS.它通过定义输入和输出来解决不同模块间的数据传递间题.这里似于Python中的包的概念，我们可以在Python文件中使用 import来导入其他的Python包，从而使用这个包中的变量和方法.这样我们写的js文件就需要提供一输入和输出.
现在的前端开发人员都习惯于在后端先写代码，利用后端开发模块化的方式来解决上面JS的历史遗留问题。可是这这样们写的JS文件浏览器就不认识了，怎么办？
webpack就是一个专门把我们在后端写的JS代码打包成浏览器认识的JS文件（当然webpack很强大它可以打包JS、 CSS'图片等静态资源）。我们并不关心打包后的JS文件里面的内容都是什么，只要它体积很小，浏览器能认它就可 以了

1559466430202

webpack 安装

npm install webpack webpack-cli -g -D

Vue-CLI

快速搭建Vue项目的脚手架

  1. 安装
    1. cnpm install -g @vue/cli
  2. 验证
    1. vue --version
  3. 创建项目
    1. vue create 项目名
    2. 根据提示创建项目(命令行)
    3. 以图形化界面创建和管理项目 vue ui

项目目录

1559468418605

常用命令

  1. 安装项目依赖/配置项目（拿到一个Vue项目之后先运行这个安装依赖）

    npm install

  2. 编译并在本地运行一个发开环境

    npm run serve

  3. 编译并打包一个生产版本

    npm run build

  4. 运行测试(前提要有测试脚本)

    npm run test

  5. 运行代码检测

    npm run lint

去网上下载一个vue项目，怎么让他跑起来

  1. cd 项目目录
  2. 执行npm install命令，安装项目依赖的模块到 node_modules目录下
  3. 启动项目 npm run serve
posted @ 2019-08-16 16:03  写bug的日子  阅读(161)  评论(0)  编辑  收藏  举报