目錄

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

 I  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.6

G:\day03>vue init webpack vuedemo

? Project name vuedemo
? Project description A Vue.js project
? Author lwx16 <[email protected]>
? 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) no

   vue-cli · Generated "vuedemo".

# Project initialization finished!
# ========================

To get started:

  cd vuedemo
  npm install (or if using yarn: yarn)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack



G:\day03>cd vuedemo

G:\day03\vuedemo>cnpm i
/ [10/36] Installing postcss-discard-overridden@^4.0.1
WARN node unsupported "[email protected]" is incompatible with [email protected] › [email protected] › [email protected] › watchpack-chokidar2@^2.0.0, expected
node@<8.10.0
\ [12/36] Installing picomatch@^2.2.1platform unsupported [email protected] › [email protected] › [email protected] › [email protected] › 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 [email protected] › [email protected] › [email protected] › [email protected] › [email protected] › 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 [email protected] › [email protected] › uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js", root: "G:\\day03\\vuedemo\\node_modules\\[email protected]@uglifyjs-webpack-plugin"
[1/3] scripts.postinstall [email protected] › [email protected] › uglifyjs-webpack-plugin@^0.4.6 finished in 156ms
[2/3] scripts.postinstall [email protected] › [email protected] › core-js@^2.4.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "G:\\day03\\vuedemo\\node_modules\\[email protected]@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/3] scripts.postinstall [email protected] › [email protected] › core-js@^2.4.0 finished in 225ms
[3/3] scripts.postinstall [email protected] › ejs@^2.5.7 run "node ./postinstall.js", root: "G:\\day03\\vuedemo\\node_modules\\[email protected]@ejs"
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

[3/3] scripts.postinstall [email protected] › ejs@^2.5.7 finished in 156ms
√ Run 3 scripts
deprecate [email protected] › 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 [email protected] › [email protected] › [email protected] › browserslist@^1.7.6 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate [email protected] › [email protected] › [email protected] › [email protected] › chokidar@^2.1.8 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
deprecate [email protected] › [email protected] › 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 [email protected] › 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

> [email protected] dev G:\day03\vuedemo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% 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% emitting

 DONE  Compiled successfully in 3332ms                                                  上午11:17:03
 I  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 <[email protected]>
? 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) no

   vue-cli · Generated "vuedemo2".

# Project initialization finished!
# ========================

To get started:

  cd vuedemo2
  npm install (or if using yarn: yarn)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack



G:\day03>cd vuedemo2

- [5/36] Installing [email protected]
WARN node unsupported "[email protected]" is incompatible with [email protected] › [email protected] › [email protected] › watchpack-chokidar2@^2.0.0, expected node@<8.10.0
| [7/36] Installing binary-extensions@^2.0.0platform unsupported [email protected] › [email protected] › [email protected] › [email protected] › 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 [email protected] › [email protected] › [email protected] › [email protected] › [email protected] › 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 [email protected] › [email protected] › uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js", root: "G:\\day03\\vuedemo2\\node_modules\\[email protected]@uglifyjs-webpack-plugin"
[1/3] scripts.postinstall [email protected] › [email protected] › uglifyjs-webpack-plugin@^0.4.6 finished in 142ms
[2/3] scripts.postinstall [email protected] › ejs@^2.5.7 run "node ./postinstall.js", root: "G:\\day03\\vuedemo2\\node_modules\\[email protected]@ejs"
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

[2/3] scripts.postinstall [email protected] › ejs@^2.5.7 finished in 119ms
[3/3] scripts.postinstall [email protected] › [email protected] › core-js@^2.5.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "G:\\day03\\vuedemo2\\node_modules\\[email protected]@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 -)

[3/3] scripts.postinstall [email protected] › [email protected] › core-js@^2.5.0 finished in 135ms
√ Run 3 scripts
deprecate [email protected] › 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 [email protected] › [email protected] › [email protected] › browserslist@^1.7.6 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate [email protected] › [email protected] › [email protected] › [email protected] › chokidar@^2.1.8 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
deprecate [email protected] › bfj-node4@^5.2.0 Switch to the `bfj` package for fixes and new features!
deprecate [email protected] › [email protected] › 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

> [email protected] dev G:\day03\vuedemo2
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% 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% emitting

 DONE  Compiled successfully in 2672ms                                                                      上午11:34:57
 I  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>

多謝觀看 ~

Vue.js-Day03-AM【超級詳細：Node.js環境安裝、安裝淘寶鏡像（Win、Mac）、安裝Vue腳手架、初始化Vue項目-命令解釋（Vscode、命令行窗口）、目錄介紹、Vue文件介紹】

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 【組件】

2.4、如何安裝 vue腳手架？

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

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

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

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