本文详细介绍了在MAC系统上如何安装vue，包括检查和安装node，使用vue-cli创建webpack模板项目，设置工程信息，以及如何打包vue目录。通过`npm install`，`npm run build`等命令，最终生成dist文件并在本地服务器运行验证安装成功。
MAC系统安装vue
检查node版本
node -v
若找不到node，则需要下载及安装：
https://nodejs.org/en/download/ （选择mac os）
###终端输入：
sudo npm install -g vue-cli
manblue@appledeMacBook-Pro ~ % sudo npm install -g vue-cli
Password:
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue
/usr/local/bin/vue-list -> /usr/local/lib/node_modules/vue-cli/bin/vue-list
/usr/local/bin/vue-init -> /usr/local/lib/node_modules/vue-cli/bin/vue-init
+ vue-cli@2.9.6
added 239 packages from 205 contributors in 67.6s
╭────────────────────────────────────────────────────────────────╮
│ │
│ New major version of npm available! 5.6.0 → 6.12.0 │
│ Changelog: https://github.com/npm/cli/releases/tag/v6.12.0 │
│ Run npm install -g npm to update! │
│ │
╰────────────────────────────────────────────────────────────────╯
manblue@appledeMacBook-Pro ~ % vue
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
init generate a new project from a template
list list available official templates
build prototype a new project
create (for v3 warning only)
help [cmd] display help for [cmd]
manblue@appledeMacBook-Pro ~ % vue list
vue-cli · connect ECONNREFUSED 13.250.168.23:443
manblue@appledeMacBook-Pro ~ %
###安装webpack模板，并设置工程信息
输入命令 `vue init webpack front
注释：sell是名称，自己可以随意命名
接下来输入项目名称，项目描述，作者，是否安装路由，是否使用后ES检测器，输入 y，需要，是否需要前端测试库n 不需要，完成。
(django) manblue@appledeMacBook-Pro Tsjc % vue init webpack frontend
? Project name frontend
? Project description A Vue.js project)tsjc vue.js project
? Author tsjc <1102720253@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
#慢慢等待下载部署完成
打包vue目录
cd frontend
npm install
npm run build
成后会生成dist文件 内有index.html和文件夹static
(django) manblue@appledeMacBook-Pro Tsjc % cd frontend
(django) manblue@appledeMacBook-Pro frontend % npm install
> fsevents@1.2.12 install /Users/manblue/PycharmProjects/django/Tsjc/frontend/node_modules/fsevents
> node-gyp rebuild
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack at ChildProcess.emit (events.js:311:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Darwin 19.4.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/manblue/PycharmProjects/django/Tsjc/frontend/node_modules/fsevents
gyp ERR! node -v v12.16.1
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 install: `node-gyp rebuild`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1
audited 12583 packages in 6.762s
28 packages are looking for funding
run `npm fund` for details
found 13 vulnerabilities (1 low, 8 moderate, 4 high)
run `npm audit fix` to fix them, or `npm audit` for details
(django) manblue@appledeMacBook-Pro frontend % npm run build
> frontend@1.0.0 build /Users/manblue/PycharmProjects/django/Tsjc/frontend
> node build/build.js
Hash: f4ec6ee7098b49586922
Version: webpack 3.12.0
Time: 5653ms
Asset Size Chunks Chunk Names
static/js/vendor.4ad267b4786a3ebd3327.js 121 kB 0 [emitted] vendor
static/js/app.b22ce679862c47a75225.js 11.6 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest
static/css/app.30790115300ab27614ce176899523b62.css 432 bytes 1 [emitted] app
static/css/app.30790115300ab27614ce176899523b62.css.map 797 bytes [emitted]
static/js/vendor.4ad267b4786a3ebd3327.js.map 613 kB 0 [emitted] vendor
static/js/app.b22ce679862c47a75225.js.map 22.2 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest
index.html 510 bytes [emitted]
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
(django) manblue@appledeMacBook-Pro frontend % ls
README.md config index.html package-lock.json src
build dist node_modules package.json static
(django) manblue@appledeMacBook-Pro frontend %
###pnm run dev
执行完之后，在浏览器中输入http://localhost:8080
若显示如下界面，则表示安装成功
(django) manblue@appledeMacBook-Pro frontend % npm run dev
> frontend@1.0.0 dev /Users/manblue/PycharmProjects/django/Tsjc/frontend
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 26/31 modules 5 active ...ects/django/Tsjc/frontend/src/App.vue{ parser: "babylon" } 95% emitting
DONE Compiled successfully in 2383ms 12:07:48 PM
I Your application is running here: http://localhost:8080
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fxPT5F0q-1586232665256)(/Volumes/BANQ/千锋python/python——基础知识:django:flask/django/PHOTO/E33881AA-62FC-46D8-9BFF-BCC8689B9CE5.png)]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
