项目搭建 Vue + Parcel

接到一个Vue项目：
目前，前端工程化趋势下，写代码之前需要搭建项目所需的环境。
由于webpack需要配置的东西较多，不易上手，所以用Parcel前端打包工具，来进行前端工程化打包。

首先确保本地有Nodejs环境：
然后使用 NPM 安装 Parcel，代码如下：

PS D:\Weather> npm install parcel-bundler --save

> deasync@0.1.14 install D:\Weather\node_modules\deasync
> node ./build.js

`win32-x64-node-10` exists; testing
Binary is fine; exiting

> parcel-bundler@1.11.0 postinstall D:\Weather\node_modules\parcel-bundler
> node -e "console.log('\u001b[35m\u001b[1mLove Parcel? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/parcel/donate\u001b[0m')"

Love Parcel? You can now donate to our open collective:
 > https://opencollective.com/parcel/donate
npm WARN saveError ENOENT: no such file or directory, open 'D:\Weather\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'D:\Weather\package.json'
npm WARN Weather No description
npm WARN Weather No repository field.
npm WARN Weather No README data
npm WARN Weather No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ parcel-bundler@1.11.0
added 733 packages from 609 contributors and audited 7717 packages in 160.827s
found 0 vulnerabilities

使用nodejs自动化创建项目：

PS D:\Weather> npm init -y
Wrote to D:\Weather\package.json:

{
  "name": "Weather",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "parcel-bundler": "^1.11.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

创建完项目文件夹会出现，node_modules文件夹，和package.json 文件。
说明项目创建成功，接下来安装依赖包：Vue ，--save是为了让package.json文件有安装这个依赖包的记录。

PS D:\Weather> npm install vue --save
npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ECONNRESET: request to https://registry.npmjs.org/vue failed, reason: read ECONNRESET
npm WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
npm WARN Weather@1.0.0 No description
npm WARN Weather@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ vue@2.6.6
added 1 package from 1 contributor in 151.753s
PS D:\Weather> npm index.html

Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    completion, config, create, ddp, dedupe, deprecate,
    dist-tag, docs, doctor, edit, explore, get, help,
    help-search, hook, i, init, install, install-test, it, link,
    list, ln, login, logout, ls, outdated, owner, pack, ping,
    prefix, profile, prune, publish, rb, rebuild, repo, restart,
    root, run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npm <command> -h  quick help on <command>
npm -l            display full usage info
npm help <term>   search for help on <term>
npm help npm      involved overview

Specify configs in the ini-formatted file:
    C:\Users\Dzk\.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

npm@6.4.1 D:\nodejs\node_modules\npm

安装好依赖包，创建一个index.html文件和index.js文件，js文件也可以改名，但是需要和package.json文件中的“main”: 名称保持一致。

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
<div id="app">
  {{ message }}
</div>
</body>
<script type="text/javascript" src="./index.js"></script>
</html>

index.js:

import Vue from 'vue'

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

现在在命令行中使用parcel进行打包运行项目会报错。
这就需要在package.json文件中手动加入一行代码：

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

这时在命令行中打包项目：

PS D:\Weather> parcel index.html
Server running at http://localhost:1234
√  Built in 32ms.

这样就说明项目打包成功了，打开浏览器输入网址：http://localhost:1234/
就可以看到以下界面：

捕获.PNG

就说明项目创建成功了，并且可以跑起来。

接下来就需要写自己的功能开发代码了。