100_第一个vue-cli项目
目录
什么是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>
100_第一个vue-cli项目的更多相关文章
- 手动实现一个vue cli
目录 手动实现一个vue cli 1. 思考准备 2. 我们组织源码将会放在名为src的目录,webpack 打包需要一个入口文件,我们取作 main.js 3. 先预想以下会用到哪些基本依赖,第一个 ...
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息（包括：development、production）
使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...
- 学习一个Vue模板项目
最开始学习Vue的时候,不建议直接使用模板,而应该自己从头写起.模板都是人写的,要坚信"人能我能".只有自己亲自实践,才能促进自己主动思考,才能对模板.框架有深刻的理解. 在Git ...
- 【vue】创建一个vue前端项目，编译，发布
npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工 ...
- webpack 打包和手动创建一个vue的项目
首先我们为啥要用webpack,为啥不用其他的打包的工具. 先听我捋捋, Webpack有人也称之为 模块打包机 ,由此也可以看出Webpack更侧重于模块打包,当然我们可以把开发中的所有资源(图片. ...
- 安装Vue和创建一个Vue脚手架项目
首先 安装node.js,安装成功可以在控制台输入[node --version ]查看node的版本,因为安装了node会自带npm所以我们可以用 [npm --version]查到npm版本 如 ...
- vue/cli项目添加外部js文件的一个方法
有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...
- vue cli 项目的提交
前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...
- Windows10安装node.js，vue.js以及创建第一个vue.js项目
[工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...
随机推荐
- 一、Ansible基础之入门篇
目录 1. Ansible基础 1.1 介绍 1.2 工作原理 1.3 如何安装 1.3.1 先决条件 1.3.2 安装Ansible 1.4 管理节点与被管理节点建立SSH信任关系 1.5 快速入门 ...
- DIVIDEMIX: LEARNING WITH NOISY LABELS AS SEMI-SUPERVISED LEARNING
论文阅读: DIVIDEMIX: LEARNING WITH NOISY LABELS AS SEMI-SUPERVISED LEARNING 作者说明 版权声明:本文为博主原创文章,遵循CC 4.0 ...
- 使用gitlab runner 进行CI（二）：gitlab runner的安装与配置
参考 https://docs.gitlab.com/runner/install/index.html,可以选择与gitlab相同的版本. gitlab runner可以通过安装binary包或do ...
- Go语言核心36讲（导读）--学习笔记
目录 开篇词 | 跟着学,你也能成为Go语言高手 导读 | 写给0基础入门的Go语言学习者 导读 | 学习专栏的正确姿势 开篇词 | 跟着学,你也能成为Go语言高手 Go 语言是由 Google 出品 ...
- CSS写一个圣诞树Chrome浏览器小插件
一时兴起,突然想写一个Chrome浏览器插件,不知道写啥,就写了一个圣诞树小插件.项目源码>> Chrome浏览器插件 Chrome浏览器插件最主要的是:index.html.manife ...
- Go语言核心36讲（Go语言基础知识三）--学习笔记
03 | 库源码文件 在我的定义中,库源码文件是不能被直接运行的源码文件,它仅用于存放程序实体,这些程序实体可以被其他代码使用(只要遵从 Go 语言规范的话). 这里的"其他代码" ...
- ShardingSphere 知识库更新 | 官方样例集助你快速上手
Apache ShardingSphere 作为 Apache 顶级项目,是数据库领域最受欢迎的开源项目之一.经过 5 年多的发展,ShardingSphere 已获得超 14K Stars 的关注, ...
- 超详细的Ribbon源码解析
Ribbon简介 什么是Ribbon? Ribbon是springcloud下的客户端负载均衡器,消费者在通过服务别名调用服务时,需要通过Ribbon做负载均衡获取实际的服务调用地址,然后通过http ...
- 2021.8.6考试总结[NOIP模拟32]
T1 smooth 考场上水个了优先队列多带个$log$,前$80$分的点跑的飞快,后面直接萎了. 其实只需开$B$个队列,每次向对应队列中插入新的光滑数,就能保证队列中的数是单调的. 为了保证不重, ...
- WiFi模块选型参考
经常会碰到一些关于wifi模块的咨询,很多刚接触wifi模块的设计人员或者用户,只知道提wifi模块,很难提具体的模块要求!希望通过文章的介绍,会做到有的放矢!咨询时一定要搞清楚自己希望使用什么主芯片 ...