接到一个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
就说明项目创建成功了，并且可以跑起来。
接下来就需要写自己的功能开发代码了。
网友评论