windows中快捷键 & dos命令

windows + R 调出运行模板 ; 输入 cmd 调出dos窗口（cmd文件:windows环境下的可执行文件）
windows + E 调出（我的电脑）资源管理器

cls : 清屏操作
set : 查看当前windows操作系统的环境变量
set name : 查看指定的环境变量
set name=val : 设置环境变量(一次性的设置 关掉命令行窗口后 设置就会失效)
set name= : 删除环境变量

npm相关的命令

npm root -g : 查看电脑上全局安装的包的路径
npm init -y : 生成项目的描述文件(package.json)

npm 脚本 :
npm run xxx(脚本的名字) ：如果说脚本的名字叫start 则 run 可以省略
npm脚本执行windows命令 它会自动在项目的node_modules中.bin中去寻找对应的命令

vue2.0 脚手架

安装2.0的脚手架 : npm i vue-cli -g
查看脚手架的版本 : vue -V
查看脚手架可选的模板: vue list
初始化项目 : vue init webpack projectname
启动项目 : npm start

解读vue项目启动的流程

1. 安装2.0的脚手架 npm i vue-cli -g
   C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin 存放脚手架相关的命令
   C:\Users\Administrator\AppData\Roaming\npm 也会存放一份脚手架相关的命令 并且 有其对应的cmd文件
   C:\Users\Administrator\AppData\Roaming\npm 在windows的环境变量中有配置

2. 执行vue -V命令
   执行vue list
   执行vue init webpack demo2

   执行 C:\Users\Administrator>vue -V :时，vue -V这个命令去哪里找？
   1、去 C:\Users\Administrator目录中找vue.cmd命令 ，若 发现没有这个命令
   2、去 系统环境变量的每一个文件夹中找 vue.cmd命令 ，若 发现没有这个命令
   3、去 用户环境变量的每一个文件夹中找 vue.cmd命令，若 发现有这个命令 则执行
   4、如果都没找到 则报错!

3. 创建出一个vue项目 并启动: demo2
   进入到项目目录下:
   执行 npm start = 执行 npm run dev = 执行 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

   若卸载全局的 webpack-dev-server ，项目仍然可以启动，为什么？
   npm脚本执行windows命令 它会自动在项目的node_modules中.bin中去寻找对应的命令，而不是全局中；在一个项目中，所有人最好是拷贝同一份 node_modules 文件夹，避免每个人的安装版本不同

4. webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

   webpack-dev-server 是webpack的内置服务器
   他不光可以启动一个服务器;而且可以进行webpack打包

   --inline --progress : 打印服务器启动的进度

   --config build/webpack.dev.conf.js: 指定webapck的配置文件

5. 分析webpack.dev.conf.js 和 webpack.base.conf.js
   发现在webpack.dev.conf.js中合并(merge)了require的baseWebpackConfig;开发环境的配置需要去读两个文件的 : webpack.dev.conf.js webpack.base.conf.js

   在 webpack.base.conf.js中：
   (1)打包的入口:’./src/main.js’

   entry: {app: './src/main.js'},
   

   (2)打包成功之后会生成一个 app.js文件

   output: {path: config.build.assetsRoot,filename: '[name].js',publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath},
   

   (3)HtmlWebpackPlugin 会将生成的app.js文件注入到index.html中

6. 访问localhost:8080
   访问到 index.html
   页面成功运行

7. 脚手架与windows环境变量的结合

打包时的一些细节 (包的查找机制)

main.js --> app.js

分析main.js：

import Vue from 'vue'
import App from './App'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',render: h => h(App)
})

1、当前这个import是webpack的语法!!! 只不过当前这个import兼容es6的语法规范
2、在webpack中 天生只认识js文件 ：import xxx from js文件
3、在webpck中 如果需要引入其他类型的文件 是需要对应的loader的支持的
4、import App from "./App.vue" 需要vue-loader的支持，vue-loader 会解析App.vue文件

 import xxx from "相对路径的文件"import xxx from "绝对路径的文件"import xxx from "包名"

5、import Vue from 'vue' vue 是包名

webpack的包查找机制 和 node的包查找机制很像 !?

node的包查找机制

module.paths =
['C:\\Users\\Administrator\\Desktop\\bj_19_1121\\work\\day07\\vue-cli-demo\\node_package\\node_modules','C:\\Users\\Administrator\\Desktop\\bj_19_1121\\work\\day07\\vue-cli-demo\\node_modules','C:\\Users\\Administrator\\Desktop\\bj_19_1121\\work\\day07\\node_modules','C:\\Users\\Administrator\\Desktop\\bj_19_1121\\work\\node_modules','C:\\Users\\Administrator\\Desktop\\bj_19_1121\\node_modules','C:\\Users\\Administrator\\Desktop\\node_modules','C:\\Users\\Administrator\\node_modules','C:\\Users\\node_modules','C:\\node_modules']

1、循环module.paths列出来所有路径! 这些路径都是node_modules的路径，从项目内部的node_modules，到C盘的node_modules，查看这些路径中是否包含对应的包

2、找到第一步中对应的包 去查看包的描述文件(package.json.main字段)

• 如果存在main字段;并且main字段是一个js文件 那就使用该js文件
• 如果不存在main字段;或者说main字段指向的不是一个js文件：node会把当前包底下的index.js文件作为模块
• 如果当前包底下 没有对应的index.js文件：那么node会选择报错

webpack的包查找机制

webpack的包查找机制 本质上是在node包查找机制的基础上建立的

1. 循环resolve.modules列出来所有路径! 查看这些路径中是否包含对应的包
   resolve.modules默认值 ./node_modules 、 ../node_modules … …
   【resolve.modules 在 webpack.base.conf.js中 】

2. 找到第一步中对应的包 去查看包的描述文件(package.json)

   找对应的字段(这个字段由resolve.mainFields配置来指定要寻找的字段名)
   resolve.mainFields默认值 :['browser', 'module', 'main']，所以需要在package.json中查找['browser', 'module', 'main']这几个字段

   如果存在resolve.mainFields指定的字段;并且字段指向是一个js文件 那就使用该js文件
   如果不存在resolve.mainFields指定的字段;或者说resolve.mainFields指定的字段指向的不是一个js文件则走第三步

3. node会把当前包底下的[resolve.mainFiles].js文件作为模块
   resolve.mainFiles 默认值:index

4. 如果当前包底下 没有对应的[resolve.mainFiles].js文件
   那么node会选择报错

如果webpack为对应的包配置了别名了 那不会走以上的规则 而是直接找到别名所对应的js文件
【别名的配置也是在webpack.base.conf.js中 】

   alias: {'vue$': 'vue/dist/vue.esm.js',  //必须加$'@': resolve('src'),}