什么是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>

初始化并运行

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>

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

Vue-cli目录结构

用IDEA打开myvue

• 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

'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目录是项目的源码目录，所有代码都会写在这里

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 组件

// 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

<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>

最新文章

1. Unity基础知识学习笔记二
2. Hibernate第一个例子
3. [转]Struts2.3.16.1+Hibernate4.3.4+Spring4.0.2 框架整合
4. svn 修改文件的二进制或文本标记
5. Windows Azure Web Site (17) Azure Web Site 固定公网IP地址
6. Bootstrap Typeahead/Jquery autocomplete自动补全
7. innerHTML,innerText,outHTML,outText区别
8. UL LI 布局 TAB 切换条
9. c++ 10
10. Docker背后的容器管理——Libcontainer深度解析
11. 说说Android应用的persistent属性
12. Android Studio 快速开发
13. Python/Django(CBV/FBV/ORM操作)
14. 如何确保Memcache数据读写操作的原子性（转）
15. 学号 20175223 《Java程序设计》第1周学习总结
16. bata5
17. Python 装饰器学习心得
18. RXSwift--登录注册那点事
19. 浅谈P2P终结者原理及其突破
20. LoadRunner--获取请求的返回结果函数

热门文章

1. SQL实例_11Oracle基本操作
2. css实现水平-垂直居中的方法
3. BPMN 學習實例
4. OO电梯作业总结
5. ssh后门反向代理实现内网穿透
6. GitHub Universe 2021｜MS Reactor 邀你共聚年度盛会
7. UVA-1016 Silly Sort
8. Linux C 数据结构 ->单向链表
9. 实验7：基于REST API的SDN北向应用实践
10. 汇编--LDR