打开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 【组件】

猜你喜欢

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) 相应的浏览器窗口