100_第一个vue-cli项目

2021 年 11 月 20 日
笔记
140_vue

什么是vue-cli
主要的功能
需要的环境
第一个 vue-cli 应用程序
Vue-cli目录结构
- index.js
- src 目录
- main.js
- App.vue

什么是vue-cli

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

主要的功能

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

需要的环境

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

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

Git : //git-scm.com/downloads

镜像://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=//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
[email protected]@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\[email protected]@commander
[2/20] semver@^5.1.0 installed at node_modules\[email protected]@semver
[3/20] [email protected] installed at node_modules\[email protected]@uid
[4/20] user-home@^2.0.0 installed at node_modules\[email protected]@user-home
[5/20] tildify@^1.2.0 installed at node_modules\[email protected]@tildify
[6/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-
[email protected]@validate-npm-package-name
[7/20] minimatch@^3.0.0 installed at node_modules\[email protected]@minimatch
[8/20] [email protected] installed at node_modules\[email protected]@coff
ee-script
[9/20] multimatch@^2.1.0 installed at node_modules\[email protected]@multimatch
[10/20] rimraf@^2.5.0 installed at node_modules\[email protected]@rimraf
[11/20] chalk@^2.1.0 installed at node_modules\[email protected]@chalk
[12/20] ora@^1.3.0 installed at node_modules\[email protected]@ora
[13/20] read-metadata@^1.0.0 installed at node_modules\[email protected]@read
-metadata
[14/20] consolidate@^0.14.0 installed at node_modules\[email protected]@consol
idate
[15/20] metalsmith@^2.1.0 installed at node_modules\[email protected]@metalsmith

[16/20] request@^2.67.0 installed at node_modules\[email protected]@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\[email protected]@handlebars

[19/20] async@^2.4.0 installed at node_modules\[email protected]@async
[20/20] inquirer@^6.0.0 installed at node_modules\[email protected]@inquirer
deprecate request@^2.67.0 request has been deprecated, see //github.com/re
quest/request/issues/3142
deprecate [email protected] CoffeeScript on NPM has moved to "coffeescript" (
no hyphen)
deprecate [email protected] › har-validator@~5.1.3 this library is no longer suppor
ted
deprecate [email protected] › 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 //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:
    → [email protected] › 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)
[[email protected]] link C:\Users\Administrator\AppData\Roaming\npm\vue@ -> C:\Users
\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
[[email protected]] link C:\Users\Administrator\AppData\Roaming\npm\vue-init@ -> C:\
Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
[[email protected]] 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 应用程序

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 <[email protected]>
? 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 //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 [email protected] › ejs@^2.5.7 run "node
./postinstall.js", root: "D:\\code\\vue\\myvue\\node_modules\\[email protected]@ejs"
Thank you for installing EJS: built with the Jake JavaScript build tool (https:/
/jakejs.com/)

[1/4] scripts.postinstall [email protected] › ejs@^2.5.7 finished i
n 960ms
[2/4] scripts.install [email protected] › [email protected] › 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 [email protected] › [email protected] › fsevents@^1.2
.7 finished in 249ms
[3/4] scripts.postinstall [email protected] › uglifyjs-webpack-plugin@^0.4.6 run "n
ode lib/post_install.js", root: "D:\\code\\vue\\myvue\\node_modules\\_uglifyjs-w
[email protected]@uglifyjs-webpack-plugin"
[3/4] scripts.postinstall [email protected] › uglifyjs-webpack-plugin@^0.4.6 finish
ed in 244ms
[4/4] scripts.postinstall [email protected] › [email protected] › core-js@^2
.5.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "D:\\code\
\vue\\myvue\\node_modules\\[email protected]@core-js"
Thank you for using core-js ( //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:
> //opencollective.com/core-js
> //www.patreon.com/zloirock

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

[4/4] scripts.postinstall [email protected] › [email protected] › 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 //gith
ub.com/webpack-contrib/mini-css-extract-plugin
deprecate [email protected] › chokidar@^2.1.2 Chokidar 2 will break on n
ode v14+. Upgrade to chokidar 3 with 15x less dependencies.
deprecate [email protected] › uglify-es@^3.3.4 support for ECMAScrip
t is superseded by `uglify-js` as of v3.13.0
deprecate [email protected] › [email protected] › [email protected] › brow
serslist@^1.5.2 Browserslist 2 could fail on reading Browserslist >3.0 config us
ed in other tools.
deprecate [email protected] › [email protected] › fsevents@^1.2.7 fsevents
1 will break on node v14+ and could be using insecure binaries. Upgrade to fseve
nts 2.
deprecate [email protected] › [email protected] › flatten@^1.0.2 fla
tten is deprecated in favor of utility frameworks such as lodash.
deprecate [email protected] › browserslist@^2.11.3 Browserslist 2 could fail on
 reading Browserslist >3.0 config used in other tools.
deprecate [email protected] › bfj-node4@^5.2.0 Switch to the `bfj`
package for fixes and new features!
deprecate [email protected] › [email protected] › [email protected] › snapdragon
@0.8.2 › [email protected] › urix@^0.1.0 Please see //github.com/ly
dell/urix#deprecated
deprecate [email protected] › [email protected] › [email protected] › snapdragon
@0.8.2 › [email protected] › resolve-url@^0.2.1 //github.com/lydell
/resolve-url#deprecated
deprecate [email protected] › [email protected] › 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 //v8.dev/blog/math-random
 for details.
deprecate [email protected] › [email protected] › [email protected] › svgo@^0.7.0
 This SVGO version is no longer supported. Upgrade to v2.x.x.
deprecate [email protected] › [email protected] › cssnano-pr
[email protected] › [email protected] › svgo@^1.0.0 This SVGO version is no lo
nger supported. Upgrade to v2.x.x.
deprecate [email protected] › [email protected] › [email protected] › querystring@0.
2.0 The querystring API is considered Legacy. new code should use the URLSearchP
arams API instead.
deprecate [email protected] › [email protected] › 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:
    → [email protected] › [email protected] › electron-to-chromium@^1.3.4
7(1.3.888) (03:02:31)
    → [email protected] › [email protected] › caniuse-lite@^1.0.30000844(
1.0.30001276) (10:53:05)
    → [email protected] › [email protected] › [email protected] › browser
[email protected] › 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

> [email protected] 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?//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\[email protected]@url\url
 10% building modules 3/7 modules 4 active [email protected]@webpack\hot\dev-server
 10% building modules 4/7 modules 3 active [email protected]@webpack\hot\dev-server
 10% building modules 5/7 modules 2 active [email protected]@webpack\hot\dev-server
 10% building modules 6/7 modules 1 active ...e\node_modules\[email protected]@url\url
 10% building modules 6/8 modules 2 active [email protected]@webpack\hot\emitter
 10% building modules 7/8 modules 1 active [email protected]@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\[email protected]@webpack\hot\lo
 10% building modules 8/10 modules 2 active ...es\[email protected]@webpack\hot\lo
 11% building modules 9/10 modules 1 active ...es\[email protected]@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\[email protected]@url\uti
 11% building modules 10/12 modules 2 active ...\node_modules\[email protected]@url\ut
 11% building modules 10/13 modules 3 active ...\[email protected]@punycode\punyco
 11% building modules 10/14 modules 4 active [email protected]@querystring-es3\ind
 11% building modules 11/14 modules 3 active [email protected]@querystring-es3\ind
 11% building modules 11/15 modules 4 active [email protected]@loglevel\lib\loglev
 11% building modules 12/15 modules 3 active [email protected]@loglevel\lib\loglev
 11% building modules 12/16 modules 4 active [email protected]@webpack\buildin\modu
 11% building modules 12/17 modules 5 active [email protected]@webpack\buildin\glob
 11% building modules 13/17 modules 4 active [email protected]@webpack\buildin\glob
 11% building modules 14/17 modules 3 active [email protected]@loglevel\lib\loglev
 11% building modules 15/17 modules 2 active [email protected]@loglevel\lib\loglev
 11% building modules 15/18 modules 3 active ...odules\[email protected]@events\even
 11% building modules 15/19 modules 4 active [email protected]@strip-ansi\ind
 11% building modules 16/19 modules 3 active [email protected]@strip-ansi\ind
 12% building modules 17/19 modules 2 active [email protected]@strip-ansi\ind
 12% building modules 17/20 modules 3 active [email protected]@sockjs-client\dist\sock
 12% building modules 18/20 modules 2 active [email protected]@sockjs-client\dist\sock
 12% building modules 18/21 modules 3 active [email protected]@querystring-es3\deco
 12% building modules 18/22 modules 4 active [email protected]@querystring-es3\enco
 12% building modules 19/22 modules 3 active [email protected]@querystring-es3\enco
 12% building modules 19/23 modules 4 active ...s\[email protected]@ansi-html\ind
 12% building modules 20/23 modules 3 active ...s\[email protected]@ansi-html\ind
 12% building modules 20/24 modules 4 active [email protected]@html-entities\lib\ind
 12% building modules 20/25 modules 5 active ...dules\[email protected]@vue\dist\vue.e
 12% building modules 21/25 modules 4 active ...dules\[email protected]@vue\dist\vue.e
 12% building modules 22/25 modules 3 active ...dules\[email protected]@vue\dist\vue.e
 12% building modules 23/25 modules 2 active ...dules\[email protected]@vue\dist\vue.e
 12% building modules 24/25 modules 1 active ...dules\[email protected]@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 [email protected]@ansi-regex\ind
 13% building modules 30/31 modules 1 active [email protected]@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 [email protected]@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: //localhost:8080

安装并运行成功后在浏览器输入：//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 <[email protected]>",
  "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 //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, // //webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    
    /**
     * Source Maps
     */

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

Tags: 140_vue

100_第一个vue-cli项目

什么是vue-cli

主要的功能

需要的环境

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

Git : //git-scm.com/downloads

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

安装 vue-cli

第一个 vue-cli 应用程序

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

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

初始化并运行

Vue-cli目录结构

index.js

src 目录

main.js

App.vue

VirMach 便宜 VPS

QNews

100_第一个vue-cli项目

什么是vue-cli

主要的功能

需要的环境

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

Git : //git-scm.com/downloads

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

安装 vue-cli

第一个 vue-cli 应用程序

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

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

初始化并运行

Vue-cli目录结构

index.js

src 目录

main.js

App.vue

分享此文：

Related Posts

前端面试第快速复盘，不标准的面试经验分享 （二）

Jenkins CLI 命令行 v0.0.22

windows安装docker

小男孩不想写作业被家长训哭 旁边小猫这动作感动众网友

VirMach 便宜 VPS

QNews

热门搜寻

前端面试第快速复盘，不标准的面试经验分享（二）

小男孩不想写作业被家长训哭旁边小猫这动作感动众网友