目   录

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

1. template 是模板

2. script 是js

3. style 是样式

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

多 谢 观 看 ~