CLI | iGmaBlog

关于 npm 的一些指令

查看镜像
sh
```
npm config get registry
```
1
查看电脑中所有全局包
sh
```
npm list -g --depth 0
```
1

将镜像切至淘宝镜像

npm config set registry https://registry.npm.taobao.org

全局安装 @vue/cli
1. Windows 上安装
  sh
```
npm i -g @vue/cli
```
  1
2. Mac 上安装
  sh
```
sudo npm i -g @vue/cli
```
  1

创建 Vue 项目

首先要在控制台中切换到项目的根目录（项目文件存放的地方）
输入指令：vue create 项目名
敲完第 2 步指令按下回车后，控制台会让你选择所使用的 Vue 的版本，这里咱们选择 Vue2。
项目创建完成
通过 cd 指令进入到项目根目录，然后运行指令：npm run serve 让项目跑起来。最后会在页面中出现两个 ip 地址，其中一个是 https://localhost:8080 把这个复制到浏览器的地址栏中即可访问你的项目。另一个 ip 地址用于同局域网的小伙伴进行访问。

项目目录结构

.gitignore 文件

git 的忽略文件，如果有一些文件或文件夹不希望由 git 管理，可以在这个配置文件中进行配置。

babel.config.js

babel 的配置文件，负责 ES6 转 ES5。这里不需要我们做更改，用官方给提供的即可。

package.json

npm 包的说明书。
scripts 配置项
1. 新创建的项目中，默认会给我们 3 个运行脚本。
  json
```
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},
```
  1
  2
  3
  4
  5
2. serve：在本地搞一个服务器，让项目跑起来。
3. build：代码构建。当项目写完之后，通过这个指令将所有 .vue 文件构建成浏览器能识别的 .html .css .js 文件。
4. lint：语法检查。检查 css、js 语法是否存在不合理。基本不用。

package-lock.json

包版本控制文件。

README.md

项目说明书。学习阶段可以用来记笔记，如果不喜欢用代码的方式编写 MarkDown 文档，可以借助第三方工具编写，例如：Typora

src 目录

main.js
1. 这个文件特别重要，它是整个项目的入口文件。
2. 当执行 npm run serve 指令后，CLI 会第一时间找到这个文件并执行。
3. 打开文件发现，似曾相识，这些代码在之前都写过。
  javascript
```
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
```
  1
  2
  3
  4
  5
  6
  7
  8
4. 代码第一行：引入 Vue，也就是之前咱们在 HTML 中引入的 vue.js，这里引入的是一个 vue 的包，实现的功能和 vue.js 一样。vue 这个包在项目根目录中的 node_modules 目录里。
5. 代码第二行：引入 App 这个组件，他是所有组件的父组件。
6. 代码第四行：关闭 Vue 的生产提示。这东西关不关无所谓，关闭之后运行项目控制台看着会干净一点。如果值为 true，表示开启生产提示，运行项目时控制台会输出一段话。
7. 代码第6 ~ 8行：new 一个 Vue 实例。
assets 目录：存放一些静态资源。例如：图片、字体等。
components 目录：所有的组件都放在这个文件夹下，也就是除了 App.vue 以外的所有 .vue 文件。

public 目录

favicon.ico：这个不用说，Web 页签图标，找一个自己喜欢的，换掉。
index.html：终于了，终于看到 .html 文件了。这是一个非常重要的文件，内部包含我们需要的一个容器。也就是 id 为 app 的盒子。
html
```
<!DOCTYPE html>
<html lang="">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
	<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
	<noscript>
		<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.Please enable it to continue.</strong>
	</noscript>
	<div id="app"></div>
</body>
</html>
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- 简单看一下，有一些东西在此之前没见过。
- 代码第 5 行：针对 IE 浏览器的一个特殊配置，意思是让 IE 浏览器以最高的渲染级别渲染页面。
- 代码第 6 行：开启移动端的理想视口。
- 代码第 7 行：链接页签图标。值得注意的是，<%= BASE_URL %> 这是个啥？其实他表示的是当前目录。为了防止找不到页签图标那个文件，尽量这样写。
- 代码第 8 行：页面标题，如果你不设置，他会把项目根目录中 package.json 文件里 name 的值拿过来放到这里。
- 代码第 11 ~ 13 行：若用户使用的浏览器不支持 js，noscript 标签中的内容会被渲染出来。
- 代码第 14 行：终于找到了，什么意思自己猜去。

跑一个自己的项目

咱们在单文件组件这篇博客的尾声，给自己留了个 BUG，现在解决掉他。

编写代码

运行程序

终端运行指令：npm run serve
运行结果

关于 npm 的一些指令 ​

创建 Vue 项目 ​

项目目录结构 ​

.gitignore 文件 ​

babel.config.js ​

package.json ​

package-lock.json ​

README.md ​

src 目录 ​

public 目录 ​

跑一个自己的项目 ​

编写代码 ​

运行程序 ​