安裝node.js 和 npm 的完整步驟

vue 生命週期
1，beforeCreate    組件剛剛被建立
2，created         組件建立完成
3，beforeMount     掛載以前
4，mounted         掛載以後
5，beforeDestory   組件銷燬前調用
6，destoryed       組件銷燬後調用


<template>
	<h3>我愛你</h3>
</template>
<script>
	export default{
		data(){
			return{

			}
		},
		beforeCreate(){
			console.log("beforeCreate");
		},
		created(){
			console.log('created');
		},
		beforeMount(){
			console.log('beforeMount');
		},
		mounted(){
			console.log('mounted');
		},
		beforeDestory(){
			console.log('beforeDestory');
		},
		destoryed(){
			console.log('destoryed');
		}
	}
</script>
在Vue.js的生命週期中，能夠分爲6個階段，也就是6個函數表明6個階段，無論順序如何變，仍是會按照如下順序去執行代碼：
beforeCreate（建立前）——>created（建立後）——>beforeMount(載入前)——>mounted（載入後）——>beforeDestroy（銷燬前）——>destroyed（銷燬後）



---------如下是安裝vue項目完整步驟，一：-----------
安裝npm步驟：
1，Win+R 打開命令面板---輸入cmd，回車---在命令面板輸入:npm -v  就能夠查看是否有安裝node.js，
	若是有，則會出現版本號，不然就沒有安裝。
2，先安裝node.js 下載安裝指定盤符便可。
3，安裝完成，輸入：path + 回車   ，安裝成功會在下方顯示node.js，能夠仔細查找如下。
4，也能夠直接輸入 node -v 查看是否有安裝成功，成功就會顯示版本號。
5，安裝:Git工具。
	進入某個盤符，直接輸入   D: + 回車便可。
	可是若是要進入：D:\前端開發\HTML\組件化網頁開發  步驟二 2-3 建立XMLHttpRequest對象\Ajax\register\img
	這樣的路徑，使用手寫方式就很麻煩了，因此須要一個工具來幫忙，
	這個工具就是：官網：https://git-scm.com/  點擊  DownLoads --- 選擇相應系統的版本下載安裝便可。
	安裝完成，直接打開指定的文件夾，右擊---選擇---git bash  here 進入到此處的子程序
	立刻就跳出一個在該路徑下面的 node.js命令面板----就能夠直接進行代碼編寫。
5，安裝好node.js後，npm具體代碼安裝

---------步驟二：-----------
#全局安裝 vue-cli
	一，使用npm，訪問國外網站。
	輸入：npm install --global vue-cli
	(這裏的npm是訪問國外的網站，下載速度很慢。因此，可使用淘寶鏡像的cnpm)
	回車等待下載完成，顯示以下：

		韋德君@LAPTOP-AKTJNVLT MINGW64 /d/泉州時代/學習/vue.js
		$ npm install --global vue-cli
		npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
		npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
		C:\Users\30467\AppData\Roaming\npm\vue -> C:\Users\30467\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
		C:\Users\30467\AppData\Roaming\npm\vue-list -> C:\Users\30467\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
		C:\Users\30467\AppData\Roaming\npm\vue-init -> C:\Users\30467\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
		+ vue-cli@2.9.6
		added 241 packages from 206 contributors in 150.212s
		韋德君@LAPTOP-AKTJNVLT MINGW64 /d/泉州時代/學習/vue.js


	二，使用國內網站，淘寶的鏡像。
	不使用上面國外的npm，改成使用使用淘寶npm鏡像的步驟：
	1，輸入：npm install -g cnpm --registry=https://registry.npm.taobao.org/ + 按回車
		顯示以下；

		韋德君@LAPTOP-AKTJNVLT MINGW64 /d/泉州時代/學習/vue.js
		$ npm install -g cnpm --registry=https://registry.npm.taobao.org/
		C:\Users\30467\AppData\Roaming\npm\cnpm -> C:\Users\30467\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
		+ cnpm@6.1.0
		added 680 packages from 928 contributors in 121.079s
		韋德君@LAPTOP-AKTJNVLT MINGW64 /d/泉州時代/學習/vue.js


	2，輸入： cnpm install --global vue-cli  +  回車。
		顯示以下：纔算成功安裝
			韋德君@LAPTOP-AKTJNVLT MINGW64 /d/泉州時代/學習/vue.js
			cnpm install --global vue-cli
			Downloading vue-cli to C:\Users\30467\AppData\Roaming\npm\node_modules\vue-cli_tmp
			Copying C:\Users\30467\AppData\Roaming\npm\node_modules\vue-cli_tmp\_vue-cli@2.9.6@vue-cli to C:\Users\30467\AppData\Roaming\npm\node_modules\vue-cli
			Installing vue-cli's dependencies to C:\Users\30467\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] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
			[3/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
			[4/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
			[5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.7.1@rimraf
			[6/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consolidate
			[7/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.2@chalk
			[8/20] semver@^5.1.0 installed at node_modules\_semver@5.7.1@semver
			[9/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
			[10/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
			[11/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
			[12/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-metadata
			[13/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffee-script
			[14/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name
			[15/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith
			[16/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.5.1@handlebars
			[17/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.1.0@download-git-repo
			[18/20] request@^2.67.0 installed at node_modules\_request@2.88.0@request
			[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 metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
			Recently updated (since 2019-11-05): 2 packages (detail see file C:\Users\30467\AppData\Roaming\npm\node_modules\vue-cli\node_modules\.recently_updates.txt)
			  2019-11-07
			    → metalsmith@2.3.0 › rimraf@2.7.1 › glob@^7.1.3(7.1.6) (06:07:44)
			  2019-11-06
			    → handlebars@4.5.1 › uglify-js@^3.1.4(3.6.8) (16:49:20)
			All packages installed (239 packages installed from npm registry, used 28s(network 27s), speed 191.86kB/s, json 223(438.7kB), tarball 4.55MB)
			[vue-cli@2.9.6] link C:\Users\30467\AppData\Roaming\npm\vue@ -> C:\Users\30467\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
			[vue-cli@2.9.6] link C:\Users\30467\AppData\Roaming\npm\vue-init@ -> C:\Users\30467\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
			[vue-cli@2.9.6] link C:\Users\30467\AppData\Roaming\npm\vue-list@ -> C:\Users\30467\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
			韋德君@LAPTOP-AKTJNVLT MINGW64 /d/泉州時代/學習/vue.js


----------步驟三：建立webpack模板的新項目----------
若是node.js 和 npm/cnpm 已經安裝完畢，
須要建立新的項目，則直接執行後面的幾個步驟便可。有時候會運行失敗，不知道是什麼狀況。
此外，不能在已經建立好的項目中建立另一個項目，不然直接報錯。
-------------------------------------------------
<!-- 下面的：這裏必須注意，	? Install vue-router? (Y/n) Y  必定要輸入Y，即YES -->
#建立一個基於webpack模板的新項目
	輸入：vue init webpack my-project

	顯示以下：
	韋德君@LAPTOP-AKTJNVLT MINGW64 /d/泉州時代/學習/vue.js
	$ vue init webpack my-project

	? Project name (my-project)
	? Project name my-project
	? Project description (A Vue.js project)
	? Project description A Vue.js project
	? Author
	? Author
	? Vue build standalone
	? Install vue-router? (Y/n) Y  <!-- 這裏必須注意，必定要輸入Y，即YES -->
	? Install vue-router? Yes
	? Use ESLint to lint your code? (Y/n) n
	? Use ESLint to lint your code? No
	? Set up unit tests (Y/n) n
	? Set up unit tests No
	? Setup e2e tests with Nightwatch? (Y/n) n
	? 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
	mended) npm

	   vue-cli · Generated "my-project".


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

	npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
	npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
	npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!

	這樣項目模板就算建立完畢了 ，ctrl + C 退出命令控制面板。
	按完 Ctrl + C 就會跳轉到以下：
		韋德君@LAPTOP-AKTJNVLT MINGW64 /d/泉州時代/學習/vue.js
		$


	----------步驟四：輸入下面的幾句代碼----------
	#安裝依賴包
		1，輸入：cd my-project + 回車   沒有其餘顯示，只是換行繼續輸入下面一句代碼。
		2，輸入：cnpm install + 回車 (淘寶鏡像使用) / npm install (下載國外的npm才使用)
			顯示以下：
				韋德君@LAPTOP-AKTJNVLT MINGW64 /d/泉州時代/學習/vue.js/my-project
				$ cnpm install
				platform unsupported babel-loader@7.1.5 › webpack@3.12.0 › watchpack@1.6.0 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
				[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
				√ Installed 37 packages
				√ Linked 744 latest versions
				[1/2] scripts.postinstall babel-loader@7.1.5 › webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js", root: "D:\\泉州時代\\學習\\vue.js\\my-project\\node_modules\\_uglifyjs-webpack-plugin@0.4.6@uglifyjs-webpack-plugin"
				[1/2] scripts.postinstall babel-loader@7.1.5 › webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 finished in 671ms
				[2/2] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 run "node postinstall || echo \"ignore\"", root: "D:\\泉州時代\\學習\\vue.js\\my-project\\node_modules\\_core-js@2.6.10@core-js"
				Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

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

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

				[2/2] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 finished in 751ms
				√ Run 2 scripts
				deprecate autoprefixer@7.2.6 › browserslist@^2.11.3 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
				deprecate extract-text-webpack-plugin@^3.0.0 Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
				deprecate css-loader@0.28.11 › cssnano@3.10.0 › autoprefixer@6.7.7 › browserslist@^1.7.6 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
				deprecate babel-loader@7.1.5 › webpack@3.12.0 › watchpack@1.6.0 › chokidar@2.1.8 › fsevents@^1.2.7 One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size
				deprecate webpack-bundle-analyzer@2.13.1 › bfj-node4@^5.2.0 Switch to the `bfj` package for fixes and new features!
				Recently updated (since 2019-11-05): 12 packages (detail see file D:\泉州時代\學習\vue.js\my-project\node_modules\.recently_updates.txt)
				√ All packages installed (920 packages installed from npm registry, used 1m(network 1m), speed 253.07kB/s, json 781(1.73MB), tarball 18.3MB)

				韋德君@LAPTOP-AKTJNVLT MINGW64 /d/泉州時代/學習/vue.js/my-project

		3，輸入：npm run dev  + 回車 (讓項目跑起來，淘寶鏡像和國外npm均可以使用，由於沒有涉及下載)
		顯示以下：
			韋德君@LAPTOP-AKTJNVLT MINGW64 /d/泉州時代/學習/vue.js/my-project
			$ npm run dev

			> my-project@1.0.0 dev D:\泉州時代\學習\vue.js\my-project
			> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js


			D:\Ȫ▒▒ʱ▒▒\ѧϰ\vue.js\my-project>"node"  "D:\Ȫ▒▒ʱ▒▒\ѧϰ\vue.js\my-project\node_modules\.bin\\..\_webpack-dev-server@2.11.5@webpack-dev-server\bin\webpack-dev-server.js" --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 ...泉州時代\學習\vue.js\my-project\sr 10% building modules 2/3 modules 1 active ...client\index.js?http://localhost:8 10% building modules 3/4 modules 1 active ...\webpack\hot nonrecursive /^\.\/lo 10% building modules 3/5 modules 2 active ...5@webpack-dev-server\client\socket 10% building modules 3/6 modules 3 active ...@webpack-dev-server\client\overlay 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 4/8 modules 4 active ...vue.js\my-project\src\router\index 10% building modules 5/8 modules 3 active ...vue.js\my-project\src\router\index 10% building modules 6/8 modules 2 active ...vue.js\my-project\src\router\index 10% building modules 7/8 modules 1 active ...vue.js\my-project\src\router\index 10% building modules 7/9 modules 2 active ...webpack@3.12.0@webpack\hot\emitter 10% building modules 7/10 modules 3 active ...dules\_vue@2.6.10@vue\dist\vue.es 10% building modules 7/11 modules 4 active ...t\node_modules\_url@0.11.0@url\ur 10% building modules 8/11 modules 3 active ...t\node_modules\_url@0.11.0@url\ur 11% building modules 9/11 modules 2 active ...t\node_modules\_url@0.11.0@url\ur 11% building modules 9/12 modules 3 active ...es\_webpack@3.12.0@webpack\hot\lo 11% building modules 9/13 modules 4 active ....12.0@webpack\hot\log-apply-resul 11% building modules 10/13 modules 3 active ....12.0@webpack\hot\log-apply-resu 11% building modules 11/13 modules 2 active ...t\node_modules\_url@0.11.0@url\u 11% building modules 11/14 modules 3 active ...泉州時代\學習\vue.js\my-project\ 11% building modules 11/15 modules 4 active ...project\src\components\HelloWorl 11% building modules 11/16 modules 5 active ...glevel@1.6.6@loglevel\lib\loglev 11% building modules 12/16 modules 4 active ...glevel@1.6.6@loglevel\lib\loglev 11% building modules 13/16 modules 3 active ...glevel@1.6.6@loglevel\lib\loglev 11% building modules 13/17 modules 4 active ...odules\_events@3.0.0@events\even 11% building modules 14/17 modules 3 active ...odules\_events@3.0.0@events\even 11% building modules 14/18 modules 4 active ..._strip-ansi@3.0.1@strip-ansi\ind 11% building modules 14/19 modules 5 active ...nt@1.1.5@sockjs-client\dist\sock 11% building modules 15/19 modules 4 active ...nt@1.1.5@sockjs-client\dist\sock 11% building modules 15/20 modules 5 active ...\node_modules\_url@0.11.0@url\ut 11% building modules 15/21 modules 6 active ...s\_ansi-html@0.0.7@ansi-html\ind 11% building modules 15/22 modules 7 active ...ng-es3@0.2.1@querystring-es3\ind 11% building modules 15/23 modules 8 active ...\_punycode@1.4.1@punycode\punyco 11% building modules 15/24 modules 9 active ...泉州時代\學習\vue.js\my-project\ 11% building modules 15/25 modules 10 active ...project\src\components\HelloWor 11% building modules 16/25 modules 9 active ...project\src\components\HelloWorl 12% building modules 17/25 modules 8 active ...\_punycode@1.4.1@punycode\punyco 12% building modules 17/26 modules 9 active ...ue-loader\lib\component-normaliz 12% building modules 18/26 modules 8 active ...ue-loader\lib\component-normaliz 12% building modules 18/27 modules 9 active ...泉州時代\學習\vue.js\my-project\ 12% building modules 18/28 modules 10 active ...project\src\components\HelloWorld.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
			 12% building modules 19/28 modules 9 active ...project\src\components\HelloWorl 12% building modules 20/28 modules 8 active ...ue-loader\lib\component-normaliz 12% building modules 21/28 modules 7 active ...ue-loader\lib\component-normaliz 12% building modules 22/28 modules 6 active ...ue-loader\lib\component-normaliz 12% building modules 22/29 modules 7 active ...entities@1.2.1@html-entities\ind 12% building modules 23/29 modules 6 active ...entities@1.2.1@html-entities\ind 12% building modules 24/29 modules 5 active ...entities@1.2.1@html-entities\ind 13% building modules 25/29 modules 4 active ...entities@1.2.1@html-entities\ind 13% building modules 25/30 modules 5 active ...1.3@vue-router\dist\vue-router.e 13% building modules 26/30 modules 4 active ...1.3@vue-router\dist\vue-router.e 13% building modules 27/30 modules 3 active ...1.3@vue-router\dist\vue-router.e 13% building modules 27/31 modules 4 active ...g-es3@0.2.1@querystring-es3\deco 13% building modules 27/32 modules 5 active ...g-es3@0.2.1@querystring-es3\enco 13% building modules 27/33 modules 6 active ...2.1@html-entities\lib\xml-entiti 13% building modules 27/34 modules 7 active ...1@html-entities\lib\html4-entiti 13% building modules 27/35 modules 8 active ...1@html-entities\lib\html5-entiti 13% building modules 27/36 modules 9 active ...pack@3.12.0@webpack\buildin\modu 13% building modules 27/37 modules 10 active ...pack@3.12.0@webpack\buildin\glo 13% building modules 28/37 modules 9 active ...pack@3.12.0@webpack\buildin\glob 13% building modules 29/37 modules 8 active ...pack@3.12.0@webpack\buildin\glob 13% building modules 30/37 modules 7 active ...pack@3.12.0@webpack\buildin\glob 13% building modules 31/37 modules 6 active ...pack@3.12.0@webpack\buildin\glob 13% building modules 32/37 modules 5 active ...1@html-entities\lib\html5-entiti 13% building modules 32/38 modules 6 active ....3.4@vue-hot-reload-api\dist\ind 13% building modules 32/39 modules 7 active ...泉州時代\學習\vue.js\my-project\ 13% building modules 33/39 modules 6 active ....3.4@vue-hot-reload-api\dist\ind 13% building modules 33/40 modules 7 active ...project\src\components\HelloWorl 14% building modules 34/40 modules 6 active ....3.4@vue-hot-reload-api\dist\ind 14% building modules 35/40 modules 5 active ....3.4@vue-hot-reload-api\dist\ind 14% building modules 35/41 modules 6 active ...泉州時代\學習\vue.js\my-project\ 14% building modules 35/42 modules 7 active ...project\src\components\HelloWorl 14% building modules 36/42 modules 6 active ...project\src\components\HelloWorl 14% building modules 37/42 modules 5 active ...project\src\components\HelloWorl 14% building modules 37/43 modules 6 active ...e-style-loader\lib\addStylesClie 14% building modules 38/43 modules 5 active ...e-style-loader\lib\addStylesClie 14% building modules 39/43 modules 4 active ...e-style-loader\lib\addStylesClie 14% building modules 39/44 modules 5 active ...vue.js\my-project\src\assets\log 14% building modules 40/44 modules 4 active ...vue.js\my-project\src\assets\log 14% building modules 40/45 modules 5 active ..._ansi-regex@2.1.1@ansi-regex\ind 14% building modules 41/45 modules 4 active ..._ansi-regex@2.1.1@ansi-regex\ind 15% building modules 42/45 modules 3 active ..._ansi-regex@2.1.1@ansi-regex\ind 15% building modules 42/46 modules 4 active ...@vue-style-loader\lib\listToStyl 15% building modules 43/46 modules 3 active ...@vue-style-loader\lib\listToStyl 15% building modules 44/46 modules 2 active ...@vue-style-loader\lib\listToStyl 15% building modules 45/46 modules 1 active ...@vue-style-loader\lib\listToStyl 15% building modules 46/47 modules 1 active ...er@0.28.11@css-loader\lib\css-ba 95% emitting DONE  Compiled successfully in 14781ms4:18:45 PM

			 I  Your application is running here: http://localhost:8080
			韋德君@LAPTOP-AKTJNVLT MINGW64 /d/泉州時代/學習/vue.js/my-project

	最後能夠在網頁地址欄輸入：http://localhost:8080 進行訪問。
	注意，該命令控制面板是不能關閉的，不然就沒法正常打開頁面。
	若是不當心關閉了，則使用Git在建立項目的文件夾中右擊：Git Bash Here 進入該子程序。
	而後再執行：npm run dev  +  回車    等待運行完成。

=======================================
打開頁面必定要有兩個特色：
1，必定有路由 router（路由是須要配置的）  英 /'ruːtə(r)/路由器，路由
2，必定有一個頁面（該頁面是 .vue 格式的）