•  

Vue学习笔记

发表于 2020-05-09,阅读 78

介绍

介绍

Vue是一个华人开发的基于MVVM规范的前端框架

今天我们来学习在 nodejs 下面做 vue 开发的技巧

教程

软件

  • OS:CentOS 7

  • node:v12.16.3

  • npm:v6.14.4

  • webpack:v3.12.0

  • webpack-cli:v3.3.11

安装

安装 cnpm

npm install cnpm -g
ln -s /tongfu.net/env/nodejs/node_prefix/bin/cnpm /usr/bin/

安装 vue-cli

cnpm install vue-cli -g
ln -s /tongfu.net/env/nodejs/node_prefix/bin/vue /usr/bin/
ln -s /tongfu.net/env/nodejs/node_prefix/bin/vue-init /usr/bin/
ln -s /tongfu.net/env/nodejs/node_prefix/bin/vue-list /usr/bin/

开发

初始化

进入到项目目录,输入命令

使用 webpack 模板建立项目 demo

vue-init webpack demo

正常情况下,可以看到如下内容

? Project name demo
? Project description A Vue.js project
? Author 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli 路 Generated "demo".


# Installing project dependencies ...
# ========================

npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated json3@3.3.2: Please use the native JSON object instead of JSON 3
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated

> chromedriver@2.46.0 install /tongfu.net/web/NodeJS/DemoV1.1/demo/node_modules/chromedriver
> node install.js

Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file:  https://chromedriver.storage.googleapis.com/2.46/chromedriver_linux64.zip
Saving to file: /tongfu.net/web/NodeJS/DemoV1.1/demo/node_modules/chromedriver/2.46/chromedriver/chromedriver_linux64.zip
Received 781K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3917K...
Received 4704K...
Received 5277K total.
Extracting zip contents
Copying to target path /tongfu.net/web/NodeJS/DemoV1.1/demo/node_modules/chromedriver/lib/chromedriver
Fixing file permissions
Done. ChromeDriver binary available at /tongfu.net/web/NodeJS/DemoV1.1/demo/node_modules/chromedriver/lib/chromedriver/chromedriver

> core-js@2.6.11 postinstall /tongfu.net/web/NodeJS/DemoV1.1/demo/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> uglifyjs-webpack-plugin@0.4.6 postinstall /tongfu.net/web/NodeJS/DemoV1.1/demo/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.3 (node_modules/sane/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.

added 1770 packages from 1107 contributors and audited 32318 packages in 166.784s

28 packages are looking for funding
  run `npm fund` for details

found 99 vulnerabilities (76 low, 9 moderate, 13 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details


Running eslint --fix to comply with chosen preset rules...
# ========================


> demo@1.0.0 lint /tongfu.net/web/NodeJS/DemoV1.1/demo
> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"


# Project initialization finished!
# ========================

To get started:

  cd demo
  npm run dev
  
Documentation can be found at https://vuejs-templates.github.io/webpack

启动项目

按照 to get started 进行操作

cd demo
npm run dev

正常情况下,可以看到如下信息

 DONE  Compiled successfully in 11935ms                                                                            5:39:56 PM

 I  Your application is running here: http://0.0.0.0:56789

打开 config/index.js

将里面的 host 等于 localhost 改成 0.0.0.0

将里面的 port 等于 8080 改成 56789

host: '0.0.0.0', // can be overwritten by process.env.HOST
port: 56789, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

测试项目

通过浏览器访问,只能使用 IP 地址

70936b32c7dacb7a.jpg

鬼谷子叔叔
  • 日志:212
  • 回复:13

进入ta的主页