Vue.js實訓【基礎理論(5天)+項目實戰(5天)】博客匯總表【詳細筆記】?

目? ?錄

1、Node.js-環境安裝

1.1、Node.js-詳細安裝步驟

2、vue-cli腳手架安裝

2.1、安裝淘寶鏡像

2.1.1、Windows系統

2.1.2、Mac系統

2.2、檢測淘寶鏡像是否安裝成功

2.3、什么是腳手架？

2.4、如何 安裝 vue腳手架？

2.5、檢測 vue腳手架 安裝，是否成功?

2.6、安裝“淘寶鏡像、vue腳手架”成功-截圖展示

3、初始化Vue項目

前提須知（初始化項目的命令、步驟---詳細解釋）

3.1、找到一個存放項目的目錄

3.2、進入該目錄的cmd窗口 ( 檢測一下 “vue -V” 是否可用！)

3.3、執行初始化項目的命令

3.3.1、使用VScode初始化項目

? ? ?3.3.1.1、打開VScode終端

? ? ?3.3.1.2、初始化Vue-Cli項目

? ? ?3.3.1.3、“cnpm i” 安裝 項目依賴的包

? ? ?3.3.1.4、“npm run dev”---啟動項目

? ? ?3.3.1.5、打開 項目(vuedemo)? 相應的瀏覽器窗口

? ? ?3.3.1.6、VScode初始化項目---代碼匯總

3.3.2、使用“命令行窗口”初始化項目（類似于3.3.1）

? ? ?3.3.2.1、打開命令行窗口、初始化Vue-Cli項目

? ? ?3.3.2.2、“npm run dev”---啟動項目

? ? ?3.3.2.3、打開 項目(vuedemo2)?相應的瀏覽器窗口

? ? ?3.3.2.4、“命令行窗口”初始化項目---代碼匯總

4、目錄介紹

5、文件介紹

5.1、main.js介紹

5.2、App.vue 【組件】

---

1、Node.js-環境安裝

• 打開Node.js 中文網 ：https://nodejs.org/zh-cn/

• 找到 “ 下載 ” ： https://nodejs.org/zh-cn/download/

• 選擇 windows安裝包 下載

• 下載完成之后，打開裝個windows安裝包，一路next 下去， 最后等安裝完成！

• 檢測安裝是否成功： 打開電腦的cmd命令行窗口： 輸入“node -v”，如果顯示版本號說明安裝node環境成功！

推薦 安裝 “穩定版”。?

1.1、Node.js-詳細安裝步驟

Node.js 安裝---環境配置---輸出"Hello World !"

https://blog.csdn.net/weixin_44949135/article/details/105330357

2、vue-cli腳手架安裝

2.1、安裝淘寶鏡像

2.1.1、Windows系統

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.1.2、Mac系統

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

2.2、檢測淘寶鏡像是否安裝成功

2.3、什么是腳手架？

在程序開發的時候，預先準備好的一個項目的基本目錄結構。

2.4、如何 安裝 vue腳手架？

打開命令行窗口，輸入以下命令：（ i 是 “ install ” 的 縮 寫 。）

npm i vue-cli -g // windows sudo npm i vue-cli -g // mac================安裝了淘寶鏡像就可以用下面的安裝！安裝速度-較快！================cnpm i vue-cli -g // windows sudo cnpm i vue-cli -g // mac

2.5、檢測 vue腳手架 安裝，是否成功?

【輸入“vue -V”指令，顯示版本號，說明安裝成功！】

vue -V

2.6、安裝“淘寶鏡像、vue腳手架”成功-截圖展示

環境---只需要在電腦里 配置一次，之后就不用再配置了！

3、初始化Vue項目

前提須知（初始化項目的命令、步驟---詳細解釋）

• ? 第1步： 進入項目存放目錄的cmd窗口
• ? 第2步： vue init webpack 項目名 ? ? ?// 項目名是英文
• ? 第3步： 按照上面的選擇去操作
• ? 第4步： 執行 ? cd 項目目錄
• ? 第5步： 執行 ? cnpm ?i
• ? 第6步： 執行 ? npm run dev?

vue init webpack 項目名(英文的) // 如： vue init webpack vuedemo? downloading template // 下載模板 ? Project name (vuedemo) // 項目名稱 回車 ? Project description (A Vue.js project) // 項目的描述 回車 ? Author // 作者 回車 ? Vue build (Use arrow keys) // 選擇版本打包類型 ? Runtime + Compiler: recommended for most users // 選擇上面的這個 ，回車Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - r ender functions are required elsewhere ? Install vue-router? (Y/n) // 是否安裝路由 輸入 N 回車 ? Use ESLint to lint your code? // 輸入 N 回車 ? Set up unit tests (Y/n) // 輸入 N 回車 ? Setup e2e tests with Nightwatch? No // 輸入 N 回車// 我們要安裝項目依賴的模塊包使用哪種方式， ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)Yes, use NPM // 使用npm 【沒有安裝cnpm, 就使用這個】 回車Yes, use Yarn // 使用yarn ? No, I will handle that myself // 不選擇，自己后面操作！ 【 如果安裝了cnpm 推薦 選擇這個】 回車# Project initialization finished! // 項目初始化結束 # ========================To get started: // 【輸入以下命令】cd vuedemo // 進入項目目錄npm install (or if using yarn: yarn) // 安裝項目依賴的包！ 如果安裝了cnpm, 推薦這一步執行 cnpm i 【等待...】npm run dev //啟動項目 包安裝好了之后 // 執行上述命令之后回顯示如下內容DONE Compiled successfully in 6398ms 10:59:32I Your application is running here: http://localhost:8080// 項目運行在本地的 http://localhost:8080=======================第1步： 進入項目存放目錄的cmd窗口第2步： vue init webpack 項目名 // 項目名是英文第3步： 按照上面的選擇去操作第4步： 執行 cd 項目目錄第5步： 執行 cnpm i第6步： 執行 npm run dev

3.1、找到一個存放項目的目錄

3.2、進入該目錄的cmd窗口 ( 檢測一下 “vue -V” 是否可用！)

3.3、執行初始化項目的命令

3.3.1、使用VScode初始化項目

? ? ?3.3.1.1、打開VScode終端

? ? ?3.3.1.2、初始化Vue-Cli項目

? ? ?3.3.1.3、“cnpm i” 安裝 項目依賴的包

? ? ?3.3.1.4、“npm run dev”---啟動項目

? ? ?3.3.1.5、打開 項目(vuedemo)? 相應的瀏覽器窗口

? ? ?3.3.1.6、VScode初始化項目---代碼匯總

Microsoft Windows [版本 10.0.17763.1217] (c) 2018 Microsoft Corporation。保留所有權利。G:\day03>vue -V 2.9.6G:\day03>vue init webpack vuedemo? Project name vuedemo ? Project description A Vue.js project ? Author lwx16 <l386335886@qq.com> ? 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? (recommended) novue-cli · Generated "vuedemo".# Project initialization finished! # ========================To get started:cd vuedemonpm install (or if using yarn: yarn)npm run devDocumentation can be found at https://vuejs-templates.github.io/webpackG:\day03>cd vuedemoG:\day03\vuedemo>cnpm i / [10/36] Installing postcss-discard-overridden@^4.0.1 WARN node unsupported "node@v13.12.0" is incompatible with babel-loader@7.1.5 ? webpack@3.12.0 ? watchpack@1.7.2 ? watchpack-chokidar2@^2.0.0, expected node@<8.10.0 \ [12/36] Installing picomatch@^2.2.1platform unsupported babel-loader@7.1.5 ? webpack@3.12.0 ? watchpack@1.7.2 ? chokidar@3.4.0 ? fsevents@~2.1.2 Package require os(darwin) not compatible with your platform(win32) | [12/36] Installing lazy-cache@^1.0.3[fsevents@~2.1.2] optional install error: Package require os(darwin) not compatible with your platform(win32) \ [12/36] Installing path-dirname@^1.0.0platform unsupported babel-loader@7.1.5 ? webpack@3.12.0 ? watchpack@1.7.2 ? watchpack-chokidar2@2.0.0 ? chokidar@2.1.8 ? fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32) | [12/36] Installing shebang-regex@^1.0.0[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32) √ Installed 36 packages √ Linked 755 latest versions [1/3] scripts.postinstall babel-loader@7.1.5 ? webpack@3.12.0 ? uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js", root: "G:\\day03\\vuedemo\\node_modules\\_uglifyjs-webpack-plugin@0.4.6@uglifyjs-webpack-plugin" [1/3] scripts.postinstall babel-loader@7.1.5 ? webpack@3.12.0 ? uglifyjs-webpack-plugin@^0.4.6 finished in 156ms [2/3] scripts.postinstall babel-plugin-transform-runtime@6.23.0 ? babel-runtime@6.26.0 ? core-js@^2.4.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "G:\\day03\\vuedemo\\node_modules\\_core-js@2.6.11@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/zloirockAlso, the author of core-js ( https://github.com/zloirock ) is looking for agood job -)[2/3] scripts.postinstall babel-plugin-transform-runtime@6.23.0 ? babel-runtime@6.26.0 ? core-js@^2.4.0 finished in 225ms [3/3] scripts.postinstall webpack-bundle-analyzer@2.13.1 ? ejs@^2.5.7 run "node ./postinstall.js", root: "G:\\day03\\vuedemo\\node_modules\\_ejs@2.7.4@ejs" Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)[3/3] scripts.postinstall webpack-bundle-analyzer@2.13.1 ? ejs@^2.5.7 finished in 156ms √ Run 3 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.7.2 ? watchpack-chokidar2@2.0.0 ? chokidar@^2.1.8 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. deprecate babel-plugin-transform-runtime@6.23.0 ? babel-runtime@6.26.0 ? core-js@^2.4.0 core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. 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 2020-05-20): 10 packages (detail see file G:\day03\vuedemo\node_modules\.recently_updates.txt) √ All packages installed (944 packages installed from npm registry, used 17s(network 16s), speed 1. 25MB/s, json 791(1.83MB), tarball 18.74MB)G:\day03\vuedemo>cnpm run dev> vuedemo@1.0.0 dev G:\day03\vuedemo > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js13% building modules 30/33 modules 3 active ...&index=0!G:\day03\vuedemo\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.95% emittingDONE Compiled successfully in 3332ms 上午11:17:03I Your application is running here: http://localhost:8080

3.3.2、使用“命令行窗口”初始化項目（類似于3.3.1）

? ? ?3.3.2.1、打開命令行窗口、初始化Vue-Cli項目

? ? ?3.3.2.2、“npm run dev”---啟動項目

? ? ?3.3.2.3、打開 項目(vuedemo2)?相應的瀏覽器窗口

? ? ?3.3.2.4、“命令行窗口”初始化項目---代碼匯總

Microsoft Windows [版本 10.0.17763.1217] (c) 2018 Microsoft Corporation。保留所有權利。G:\day03>vue init webpack vuedemo2? Project name vuedemo2 ? Project description A Vue.js project ? Author lwx16 <l386335886@qq.com> ? 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? (recommended) novue-cli · Generated "vuedemo2".# Project initialization finished! # ========================To get started:cd vuedemo2npm install (or if using yarn: yarn)npm run devDocumentation can be found at https://vuejs-templates.github.io/webpackG:\day03>cd vuedemo2- [5/36] Installing tty-browserify@0.0.0 WARN node unsupported "node@v13.12.0" is incompatible with babel-loader@7.1.5 ? webpack@3.12.0 ? watchpack@1.7.2 ? watchpack-chokidar2@^2.0.0, expected node@<8.10.0 | [7/36] Installing binary-extensions@^2.0.0platform unsupported babel-loader@7.1.5 ? webpack@3.12.0 ? watchpack@1.7.2 ? chokidar@3.4.0 ? fsevents@~2.1.2 Package require os(darwin) not compatible with your platform(win32) [fsevents@~2.1.2] optional install error: Package require os(darwin) not compatible with your platform(win32) - [7/36] Installing to-regex@^3.0.1platform unsupported babel-loader@7.1.5 ? webpack@3.12.0 ? watchpack@1.7.2 ? watchpack-chokidar2@2.0.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 36 packages √ Linked 755 latest versions [1/3] scripts.postinstall babel-loader@7.1.5 ? webpack@3.12.0 ? uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js", root: "G:\\day03\\vuedemo2\\node_modules\\_uglifyjs-webpack-plugin@0.4.6@uglifyjs-webpack-plugin" [1/3] scripts.postinstall babel-loader@7.1.5 ? webpack@3.12.0 ? uglifyjs-webpack-plugin@^0.4.6 finished in 142ms [2/3] scripts.postinstall webpack-bundle-analyzer@2.13.1 ? ejs@^2.5.7 run "node ./postinstall.js", root: "G:\\day03\\vuedemo2\\node_modules\\_ejs@2.7.4@ejs" Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)[2/3] scripts.postinstall webpack-bundle-analyzer@2.13.1 ? ejs@^2.5.7 finished in 119ms [3/3] 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: "G:\\day03\\vuedemo2\\node_modules\\_core-js@2.6.11@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/zloirockAlso, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)[3/3] scripts.postinstall babel-core@6.26.3 ? babel-register@6.26.0 ? core-js@^2.5.0 finished in 135ms √ Run 3 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.7.2 ? watchpack-chokidar2@2.0.0 ? chokidar@^2.1.8 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. deprecate webpack-bundle-analyzer@2.13.1 ? bfj-node4@^5.2.0 Switch to the `bfj` package for fixes and new features! deprecate babel-core@6.26.3 ? babel-register@6.26.0 ? core-js@^2.5.0 core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. Recently updated (since 2020-05-20): 10 packages (detail see file G:\day03\vuedemo2\node_modules\.recently_updates.txt) √ All packages installed (944 packages installed from npm registry, used 14s(network 13s), speed 139.41kB/s, json 791(1.83MB), tarball 0B)G:\day03\vuedemo2>npm run dev> vuedemo2@1.0.0 dev G:\day03\vuedemo2 > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js13% building modules 30/32 modules 2 active ...index=0!G:\day03\vuedemo2\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.95% emittingDONE Compiled successfully in 2672ms 上午11:34:57I Your application is running here: http://localhost:8081

4、目錄介紹

• build 打包目錄 【了解即可】

• config 配置目錄 【了解即可】

• node_modules 項目依賴包 非常重要，如果沒有這個文件夾 就去指向cnpm i 下載。 只有有這個文件夾才可以去運行項目(npm run dev) 【知道即可】

• src 開發目錄 【非常重要，開發都在這里做】

  • assets 目錄 靜態文件目錄 【這里存放css、img 這些資源，但是會被編譯】 【可以刪除的重構的】

  • components 目錄 【組件存放目錄】 【可以刪除的重構的】

  • App.vue 項目的根組件 【重要！！！】

  • main.js 項目的入口文件 【重要！！！】

• static 靜態目錄 【存在靜態文件，如圖片、css、js 這里存的東西不會被編譯】 【知道即可】

• .babelrc babel配置文件 【無需知道】

• .editorconfig 編譯器語法配置 【無需知道】

• .gitignore git版本提交的時候忽略的文件 【無需知道】

• .postcssrc.js css轉義的配置文件 【無需知道】

• index.html 【單文件的 頁面文件 重要】【知道就好了】

• package.json 【重要， npm i執行的時候就會去讀取這個文件下載依賴的包】. 【知道就好了】

• README.md 【說明文件】 【無需知道】

5、文件介紹

5.1、main.js介紹

import Vue from 'vue' // 引入Vue 相當于 script src 引入文件 import App from './App'Vue.config.productionTip = false// 實例化一個Vue對象 new Vue({ el: '#app', // 找根目錄下面的index.html里面的app節點components: { App }, // 引入根組件 App 作為 頁面的模板！template: '<App/>' })

5.2、App.vue 【組件】

• 三個部分組成---文件后綴是vue

template 是模板

script 是js

style 是樣式

<template><div>你好</div> </template><script> // 組件的JS export default {data(){return{}},methods:{},watch:{},computed:{} } </script><style scoped></style>

多 謝 觀 看 ~

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Vue.js-Day03-AM【超级详细：Node.js环境安装、安装淘宝镜像（Win、Mac）、安装Vue脚手架、初始化Vue项目-命令解释（Vscode、命令行窗口）、目录介绍、Vue文件介绍】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。