美文网首页工作生活
打包工具 parcel

打包工具 parcel

作者: 如梦初醒Tel | 来源:发表于2019-07-02 17:44 被阅读0次
  1. 创建一个项目
    进入目标目录
    使用 cd
cd Project

之后创建一个目录 mkdir demo

image.png
  1. github 创建新的文件仓库
    使用 touch 创建文件


    image.png
  2. init 仓库

image.png

创建一个 README.md

之后填写说明 vi README.md

之后 git add .

在之后提交 git commit -m "更新内容说明 "

image.png image.png
  1. 提交本地仓库
    本地的仓库已经建好,远程仓库创建好的时候在里面有个如下的内容
image.png image.png

到了这一步 算是本地与远程仓库已经连接了

  1. 添加开源协议MIT
    在github页面中,创建一个文件名 为 LICENSE,会出现一个按钮,点击进入新页面,选择
    MIT,一路默认

创建完之后,记得pull下来 使用命令 git pull

image.png
  1. 创建npm
    npm init
image.png image.png

这时候在本地仓库中会多出一个package.json文件 将它上传到远程仓库

7.创建vue

image.png
  1. 创建打包工具
    parcel

如果一个 npm 包是给用户使用的,不用加 -D。如果是给开发者使用,需要加 -D。(或者全局安装)

npm i -D parcel-bundler
image.png
  1. 使用命令
npx parcel index.html --no-cache

刚开始的时候使用npx parcel index.html 会提示告诉你

image.png image.png

报错的意思是: 您正在使用Vue的只运行时构建,其中模板编译器不可用。要么将模板预编译为呈现函数,要么使用编译器包含的构建。

解决方法

image.png

Parcel
在你项目的 package.json 中添加:

{
  // ...
  "alias": {
    "vue" : "./node_modules/vue/dist/vue.common.js"
  }
}

后面的作用是
先清除第一次编译失败的缓存。或者在末尾使用 --no-cache

10.安装gitopen工具

npm -i -g git-open

使用的时候 直接在终端输入 git open 会打开github网页

相关文章

  • GitHub上开源项目一

    1.Web 应用打包工具 parcel https://github.com/parcel-bundler/par...

  • 一次性推荐 GitHub上13款开源项目

    1Web 应用打包工具 parcel https://github.com/parcel-bundler/parc...

  • Parcel零配置,快速打包工具

    parcel它跟webpack一样都是打包工具,但是它比webpack好用,parcel主要是针对小型项目打包,p...

  • 从0实现react

    项目地址: 项目地地址参考地址: bilibili 1.火热的0配置的打包工具parcel 地址: parcel官...

  • 使用roolup构建你的lib

    概述 Rollup, 和 Webpack, Parcel 都是模块打包工具(module bundler tool...

  • parcel 入坑指南

    parcel 是什么 Parcel是一个web 应用打包工具, 与其他工具的区别在于开发者的使用体验。它利用多核处...

  • parcel 打包工具

    介绍 零配置 速度快 (缓存,利用多核cpu性能) js、css、html都可以成为入口 代码拆分按需加载 开发热...

  • Parcel打包工具

    一、开发环境 检查环境 node -v , npm -v pacel安装 npm install -g parce...

  • 打包工具 parcel

    创建一个项目进入目标目录使用 cd 之后创建一个目录 mkdir demo github 创建新的文件仓库使用 t...

  • 打包工具 Parcel

    Parcel 零配置的前端应用打包器 它提供了几乎傻瓜式的体验,我们只需要了解它所提供的几个简单的命令就可以直接用...

网友评论

    本文标题:打包工具 parcel

    本文链接:https://www.haomeiwen.com/subject/givzcctx.html