wl3pb


什么是vue-cli

  • vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;
  • 预先定义好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;

主要的功能

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

需要的环境

Node.js : http://nodejs.cn/download/

安装就无脑下一步就好,安装在自己的环境目录下

Git : https://git-scm.com/downloads

镜像:https://npm.taobao.org/mirrors/git-for-windows/
确认nodejs安装成功:

  • cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
  • cmd 下输入 npm-v,查看是否能够正确打印出版本号即可!

npm,就是一个软件包管理工具

安装 Node.js 淘宝镜像加速器(cnpm),这样子的话,下载会快很多~

# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

安装过程可能有点慢~,耐心等待!虽然安装了cnpm,但是尽量少用,有可能会出错,npm慢的时候再用

安装 vue-cli

cnpm install vue-cli -g

# 测试是否安装成功
# 查看可以基于哪些模板创建 vue 应用程序,通常我们选择 webpack
vue list

C:\Users\Administrator>cnpm install vue-cli -g
Downloading vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\v
ue-cli_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp\_vue
-cli@2.9.6@vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vu
e-cli
Installing vue-cli's dependencies to C:\Users\Administrator\AppData\Roaming\npm\
node_modules\vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules\_commander@2.20.3@commander
[2/20] semver@^5.1.0 installed at node_modules\_semver@5.7.1@semver
[3/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
[4/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
[5/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
[6/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-
package-name@3.0.0@validate-npm-package-name
[7/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
[8/20] coffee-script@1.12.7 installed at node_modules\_coffee-script@1.12.7@coff
ee-script
[9/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
[10/20] rimraf@^2.5.0 installed at node_modules\_rimraf@2.7.1@rimraf
[11/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.2@chalk
[12/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
[13/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read
-metadata
[14/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consol
idate
[15/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith

[16/20] request@^2.67.0 installed at node_modules\_request@2.88.2@request
[17/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.
1.0@download-git-repo
[18/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.7.7@handlebars

[19/20] async@^2.4.0 installed at node_modules\_async@2.6.3@async
[20/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.5.2@inquirer
deprecate request@^2.67.0 request has been deprecated, see https://github.com/re
quest/request/issues/3142
deprecate coffee-script@1.12.7 CoffeeScript on NPM has moved to "coffeescript" (
no hyphen)
deprecate request@2.88.2 › har-validator@~5.1.3 this library is no longer suppor
ted
deprecate request@2.88.2 › uuid@^3.3.2 Please upgrade  to version 7 or higher.
Older versions may use Math.random() in certain circumstances, which is known to
 be problematic.  See https://v8.dev/blog/math-random for details.
Recently updated (since 2021-10-26): 1 packages (detail see file C:\Users\Admini
strator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\.recently_updates.
txt)
  Today:
    → handlebars@4.7.7 › uglify-js@^3.1.4(3.14.3) (05:38:32)
All packages installed (234 packages installed from npm registry, used 23s(netwo
rk 22s), speed 231.93KB/s, json 220(501.95KB), tarball 4.58MB)
[vue-cli@2.9.6] link C:\Users\Administrator\AppData\Roaming\npm\vue@ -> C:\Users
\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
[vue-cli@2.9.6] link C:\Users\Administrator\AppData\Roaming\npm\vue-init@ -> C:\
Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
[vue-cli@2.9.6] link C:\Users\Administrator\AppData\Roaming\npm\vue-list@ -> C:\
Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list

C:\Users\Administrator>vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, li
nting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototypi
ng.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, lint
ing, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping
.


C:\Users\Administrator>

第一个 vue-cli 应用程序

创建Vue项目目录,并在命令行进入目录

D:\code\vue>

创建一个基于 webpack 模板的 vue 应用程序

# 这里的 myvue 是项目名称,可以根据自己的需求起名
vue init webpack myvue

一路都选择Yes即可;学习的时候可以从vue-router开始都选择No;
说明:

  • Project name:项目名称,默认 回车 即可
  • Project description:项目描述,默认 回车 即可
  • Author:项目作者,默认 回车 即可
  • Install vue-router:是否安装 vue-router,选择 y 安装
  • Use ESLint to lint your code:是否使用 ESLint 做代码检查,选择 y 安装
  • Set up unit tests:单元测试相关,选择 y 安装
  • Setup e2e tests with Nightwatch:单元测试相关,选择 y 安装
  • Should we run npm install for you after the project has been created:创建完成后直接初始化,选择 n,我们手动执行;运行结果!
D:\code\vue>vue init webpack myvue

? Project name myvue
? Project description A Vue.js project
? Author wl3pbzhyq <wl3pbzhyq@163.com>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom

mended) no

   vue-cli · Generated "myvue".

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

To get started:

  cd myvue
  npm install (or if using yarn: yarn)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack



D:\code\vue>

image.png
image.png

初始化并运行

cd myvue
npm install
npm install慢时,可以使用 cnpm install
npm run dev

执行完成后,目录多了很多依赖 node_modules

D:\code\vue\myvue>cnpm install
√ Installed 36 packages
√ Linked 804 latest versions
[1/4] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 run "node
./postinstall.js", root: "D:\\code\\vue\\myvue\\node_modules\\_ejs@2.7.4@ejs"
Thank you for installing EJS: built with the Jake JavaScript build tool (https:/
/jakejs.com/)

[1/4] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 finished i
n 960ms
[2/4] scripts.install webpack-dev-server@2.11.5 › chokidar@2.1.8 › fsevents@^1.2
.7 run "node install.js", root: "D:\\code\\vue\\myvue\\node_modules\\_fsevents@1
.2.13@fsevents"

Skipping 'fsevents' build as platform win32 is not supported
[2/4] scripts.install webpack-dev-server@2.11.5 › chokidar@2.1.8 › fsevents@^1.2
.7 finished in 249ms
[3/4] scripts.postinstall webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 run "n
ode lib/post_install.js", root: "D:\\code\\vue\\myvue\\node_modules\\_uglifyjs-w
ebpack-plugin@0.4.6@uglifyjs-webpack-plugin"
[3/4] scripts.postinstall webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 finish
ed in 244ms
[4/4] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2
.5.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "D:\\code\
\vue\\myvue\\node_modules\\_core-js@2.6.12@core-js"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfill
ing JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Colle
ctive 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 goo
d job -)

[4/4] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2
.5.0 finished in 604ms
√ Run 4 scripts
deprecate html-webpack-plugin@^2.30.1 out of support
deprecate extract-text-webpack-plugin@^3.0.0 Deprecated. Please use https://gith
ub.com/webpack-contrib/mini-css-extract-plugin
deprecate webpack-dev-server@2.11.5 › chokidar@^2.1.2 Chokidar 2 will break on n
ode v14+. Upgrade to chokidar 3 with 15x less dependencies.
deprecate uglifyjs-webpack-plugin@1.3.0 › uglify-es@^3.3.4 support for ECMAScrip
t is superseded by `uglify-js` as of v3.13.0
deprecate css-loader@0.28.11 › cssnano@3.10.0 › postcss-merge-rules@2.1.2 › brow
serslist@^1.5.2 Browserslist 2 could fail on reading Browserslist >3.0 config us
ed in other tools.
deprecate webpack-dev-server@2.11.5 › chokidar@2.1.8 › fsevents@^1.2.7 fsevents
1 will break on node v14+ and could be using insecure binaries. Upgrade to fseve
nts 2.
deprecate vue-loader@13.7.3 › postcss-selector-parser@2.2.3 › flatten@^1.0.2 fla
tten is deprecated in favor of utility frameworks such as lodash.
deprecate autoprefixer@7.2.6 › browserslist@^2.11.3 Browserslist 2 could fail on
 reading Browserslist >3.0 config used in other tools.
deprecate webpack-bundle-analyzer@2.13.1 › bfj-node4@^5.2.0 Switch to the `bfj`
package for fixes and new features!
deprecate webpack-dev-server@2.11.5 › chokidar@2.1.8 › braces@2.3.2 › snapdragon
@0.8.2 › source-map-resolve@0.5.3 › urix@^0.1.0 Please see https://github.com/ly
dell/urix#deprecated
deprecate webpack-dev-server@2.11.5 › chokidar@2.1.8 › braces@2.3.2 › snapdragon
@0.8.2 › source-map-resolve@0.5.3 › resolve-url@^0.2.1 https://github.com/lydell
/resolve-url#deprecated
deprecate webpack-dev-server@2.11.5 › sockjs@0.3.19 › uuid@^3.0.1 Please upgrade
  to version 7 or higher.  Older versions may use Math.random() in certain circu
mstances, which is known to be problematic.  See https://v8.dev/blog/math-random
 for details.
deprecate css-loader@0.28.11 › cssnano@3.10.0 › postcss-svgo@2.1.6 › svgo@^0.7.0
 This SVGO version is no longer supported. Upgrade to v2.x.x.
deprecate optimize-css-assets-webpack-plugin@3.2.1 › cssnano@4.1.11 › cssnano-pr
eset-default@4.0.8 › postcss-svgo@4.0.3 › svgo@^1.0.0 This SVGO version is no lo
nger supported. Upgrade to v2.x.x.
deprecate webpack@3.12.0 › node-libs-browser@2.2.1 › url@0.11.0 › querystring@0.
2.0 The querystring API is considered Legacy. new code should use the URLSearchP
arams API instead.
deprecate babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 core-js@<3.
3 is no longer maintained and not recommended for usage due to the number of iss
ues. Because of the V8 engine whims, feature detection in old core-js versions c
ould cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade
your dependencies to the actual version of core-js.
Recently updated (since 2021-10-28): 5 packages (detail see file D:\code\vue\myv
ue\node_modules\.recently_updates.txt)
  Today:
    → babel-preset-env@1.7.0 › browserslist@3.2.8 › electron-to-chromium@^1.3.4
7(1.3.888) (03:02:31)
    → babel-preset-env@1.7.0 › browserslist@3.2.8 › caniuse-lite@^1.0.30000844(
1.0.30001276) (10:53:05)
    → css-loader@0.28.11 › cssnano@3.10.0 › postcss-merge-rules@2.1.2 › browser
slist@1.7.7 › caniuse-db@^1.0.30000639(1.0.30001276) (09:56:38)
√ All packages installed (956 packages installed from npm registry, used 1m(net
work 1m), speed 142.54KB/s, json 804(2.16MB), tarball 6.21MB)

D:\code\vue\myvue>

image.png

D:\code\vue\myvue>npm run dev

> myvue@1.0.0 dev D:\code\vue\myvue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 10% building modules 0/1 modules 1 active ... webpack/hot/dev-server ./src/main
 10% building modules 1/2 modules 1 active ...client\index.js?http://localhost:8
 10% building modules 2/3 modules 1 active ...\webpack\hot nonrecursive /^\.\/lo
 10% building modules 2/4 modules 2 active ...5@webpack-dev-server\client\socket
 10% building modules 2/5 modules 3 active ...@webpack-dev-server\client\overlay
 10% building modules 3/5 modules 2 active ...@webpack-dev-server\client\overlay
 10% building modules 3/6 modules 3 active ...e\node_modules\_url@0.11.0@url\url
 10% building modules 3/7 modules 4 active ...pack@3.12.0@webpack\hot\dev-server
 10% building modules 4/7 modules 3 active ...pack@3.12.0@webpack\hot\dev-server
 10% building modules 5/7 modules 2 active ...pack@3.12.0@webpack\hot\dev-server
 10% building modules 6/7 modules 1 active ...e\node_modules\_url@0.11.0@url\url
 10% building modules 6/8 modules 2 active ...webpack@3.12.0@webpack\hot\emitter
 10% building modules 7/8 modules 1 active ...webpack@3.12.0@webpack\hot\emitter
 10% building modules 7/9 modules 2 active ...ndex.js!D:\code\vue\myvue\src\main
 10% building modules 7/10 modules 3 active ...es\_webpack@3.12.0@webpack\hot\lo
 10% building modules 8/10 modules 2 active ...es\_webpack@3.12.0@webpack\hot\lo
 11% building modules 9/10 modules 1 active ...es\_webpack@3.12.0@webpack\hot\lo
 11% building modules 9/11 modules 2 active ....12.0@webpack\hot\log-apply-resul
 11% building modules 9/12 modules 3 active ...\node_modules\_url@0.11.0@url\uti
 11% building modules 10/12 modules 2 active ...\node_modules\_url@0.11.0@url\ut
 11% building modules 10/13 modules 3 active ...\_punycode@1.4.1@punycode\punyco
 11% building modules 10/14 modules 4 active ...ng-es3@0.2.1@querystring-es3\ind
 11% building modules 11/14 modules 3 active ...ng-es3@0.2.1@querystring-es3\ind
 11% building modules 11/15 modules 4 active ...glevel@1.7.1@loglevel\lib\loglev
 11% building modules 12/15 modules 3 active ...glevel@1.7.1@loglevel\lib\loglev
 11% building modules 12/16 modules 4 active ...pack@3.12.0@webpack\buildin\modu
 11% building modules 12/17 modules 5 active ...pack@3.12.0@webpack\buildin\glob
 11% building modules 13/17 modules 4 active ...pack@3.12.0@webpack\buildin\glob
 11% building modules 14/17 modules 3 active ...glevel@1.7.1@loglevel\lib\loglev
 11% building modules 15/17 modules 2 active ...glevel@1.7.1@loglevel\lib\loglev
 11% building modules 15/18 modules 3 active ...odules\_events@3.3.0@events\even
 11% building modules 15/19 modules 4 active ..._strip-ansi@3.0.1@strip-ansi\ind
 11% building modules 16/19 modules 3 active ..._strip-ansi@3.0.1@strip-ansi\ind
 12% building modules 17/19 modules 2 active ..._strip-ansi@3.0.1@strip-ansi\ind
 12% building modules 17/20 modules 3 active ...nt@1.1.5@sockjs-client\dist\sock
 12% building modules 18/20 modules 2 active ...nt@1.1.5@sockjs-client\dist\sock
 12% building modules 18/21 modules 3 active ...g-es3@0.2.1@querystring-es3\deco
 12% building modules 18/22 modules 4 active ...g-es3@0.2.1@querystring-es3\enco
 12% building modules 19/22 modules 3 active ...g-es3@0.2.1@querystring-es3\enco
 12% building modules 19/23 modules 4 active ...s\_ansi-html@0.0.7@ansi-html\ind
 12% building modules 20/23 modules 3 active ...s\_ansi-html@0.0.7@ansi-html\ind
 12% building modules 20/24 modules 4 active ...ties@1.4.0@html-entities\lib\ind
 12% building modules 20/25 modules 5 active ...dules\_vue@2.6.14@vue\dist\vue.e
 12% building modules 21/25 modules 4 active ...dules\_vue@2.6.14@vue\dist\vue.e
 12% building modules 22/25 modules 3 active ...dules\_vue@2.6.14@vue\dist\vue.e
 12% building modules 23/25 modules 2 active ...dules\_vue@2.6.14@vue\dist\vue.e
 12% building modules 24/25 modules 1 active ...dules\_vue@2.6.14@vue\dist\vue.e
 13% building modules 25/26 modules 1 active ...4.0@html-entities\lib\xml-entiti
 13% building modules 25/27 modules 2 active ...0@html-entities\lib\html4-entiti
 13% building modules 25/28 modules 3 active ...0@html-entities\lib\html5-entiti
 13% building modules 26/28 modules 2 active ...0@html-entities\lib\html5-entiti
 13% building modules 27/28 modules 1 active ...0@html-entities\lib\html4-entiti
 13% building modules 28/29 modules 1 active ...?ref--0!D:\code\vue\myvue\src\Ap
 13% building modules 29/30 modules 1 active ...@html-entities\lib\surrogate-pai
 13% building modules 29/31 modules 2 active ..._ansi-regex@2.1.1@ansi-regex\ind
 13% building modules 30/31 modules 1 active ..._ansi-regex@2.1.1@ansi-regex\ind
 13% building modules 30/32 modules 2 active ...ue-loader\lib\component-normaliz
 13% building modules 31/32 modules 1 active ...ue-loader\lib\component-normaliz
 13% building modules 32/33 modules 1 active ....3.4@vue-hot-reload-api\dist\ind
 13% building modules 32/34 modules 2 active ...index=0!D:\code\vue\myvue\src\Ap
 13% building modules 33/34 modules 1 active ....3.4@vue-hot-reload-api\dist\ind
 13% building modules 33/35 modules 2 active ...index=0!D:\code\vue\myvue\src\Ap
 13% building modules 33/36 modules 3 active ...index=0!D:\code\vue\myvue\src\Ap
 14% building modules 34/36 modules 2 active ...index=0!D:\code\vue\myvue\src\Ap
p.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }
.
 14% building modules 35/36 modules 1 active ....3.4@vue-hot-reload-api\dist\ind
 14% building modules 35/37 modules 2 active ...index=0!D:\code\vue\myvue\src\Ap
 14% building modules 36/37 modules 1 active ...index=0!D:\code\vue\myvue\src\Ap
 14% building modules 36/38 modules 2 active ...e-style-loader\lib\addStylesClie
 14% building modules 37/38 modules 1 active ...index=0!D:\code\vue\myvue\src\Ap
 14% building modules 37/39 modules 2 active ...e\myvue\src\components\HelloWorl
 14% building modules 37/40 modules 3 active ...@vue-style-loader\lib\listToStyl
 14% building modules 38/40 modules 2 active ...@vue-style-loader\lib\listToStyl
 14% building modules 39/40 modules 1 active ...@vue-style-loader\lib\listToStyl
 14% building modules 39/41 modules 2 active ...e\myvue\src\components\HelloWorl
 14% building modules 40/41 modules 1 active ...@vue-style-loader\lib\listToStyl
 14% building modules 40/42 modules 2 active ...e\myvue\src\components\HelloWorl
 14% building modules 40/43 modules 3 active ...e\myvue\src\components\HelloWorl
 14% building modules 41/43 modules 2 active ...e\myvue\src\components\HelloWorl
 15% building modules 42/43 modules 1 active ...@vue-style-loader\lib\listToStyl
 15% building modules 42/44 modules 2 active ...e\myvue\src\components\HelloWorl
 15% building modules 43/44 modules 1 active ...@vue-style-loader\lib\listToStyl
 15% building modules 44/45 modules 1 active ...er@0.28.11@css-loader\lib\css-ba
 15% building modules 45/46 modules 1 active ...D:\code\vue\myvue\src\assets\log
 95% emitting

 DONE  Compiled successfully in 9813ms                                  23:21:26


 I  Your application is running here: http://localhost:8080

安装并运行成功后在浏览器输入:http://localhost:8080
image.png

Vue-cli目录结构

用IDEA打开myvue
image.png

  • build 和 config:WebPack 配置文件
  • node_modules:用于存放 npm install 安装的依赖文件
  • src: 项目源码目录
  • static:静态资源文件
  • .babelrc:Babel 配置文件,主要作用是将 ES6 转换为 ES5
  • .editorconfig:编辑器配置
  • eslintignore:需要忽略的语法检查配置文件
  • .gitignore:git 忽略的配置文件
  • .postcssrc.js:css 相关配置文件,其中内部的 module.exports 是 NodeJS 模块化语法
  • index.html:首页,仅作为模板页,实际开发时不使用
  • package.json:项目的配置文件
    • name:项目名称
    • version:项目版本
    • description:项目描述
    • author:项目作者
    • scripts:封装常用命令
    • dependencies:生产环境依赖
    • devDependencies:开发环境依赖
{
  "name": "myvue",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "wl3pbzhyq <wl3pbzhyq@163.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

index.js

image.png

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    
    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

src 目录

src目录是项目的源码目录,所有代码都会写在这里
image.png

main.js

项目的入口文件,我们知道所有的程序都会有一个入口

  • import Vue from 'vue':ES6 写法,会被转换成 require(“vue”); (require 是 NodeJS 提供的模块加载器)
  • import App from './App':意思同上,但是指定了查找路径,./ 为当前目录
  • Vue.config.productionTip = false:关闭浏览器控制台关于环境的相关提示
  • new Vue({...}):实例化 Vue
    • el: '#app':查找 index.html 中 id 为 app 的元素
    • template: '':模板
    • components: { App }:引入组件,使用的是 import App from ‘./App’ 定义的 App 组件

image.png

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

App.vue

image.png

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

相关文章:

猜你喜欢