前端技术分享
0%

【033】vue-cli4.0基础学习：创建项目

发表于 分类于

创建项目

  1. 打开cmd命令窗口
  2. 进入我们需要存放代码的目录
  3. 输入命令：vue create vue-cli
  4. 回车后，我们会看到Please pick a preset，这是让我们选择预设值，前期我们直接选择默认的就好
  5. 再次回车，创建项目开始了
  6. 过了一会，创建完成后，我们输入命令cd vue-cli进入这个项目
  7. 进入后输入命令npm run serve回车开启项目
  8. 好了，能看懂英文的同学已经看到了两个地址，我们在浏览器中打开这两个地址就可以了

项目中的文件介绍

我们在开发工具中打开vue-cli项目，看看里面都有什么文件，分别有什么作用。

项目目录如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.
|-- node_modules		// 依赖包，里面有各种项目所需要的包
|-- public				// 避开webpack
|   |-- favicon.ico		// 小图标
|   |-- index.html		// 模板文件，作用是生成项目的入口文件
|-- src					// 源码目录，我们写的代码基本会放在这里
|   |-- assets			// 公共文件存放处
|   |-- components		// vue公共组件
|   |-- App.vue			// 页面入口文件
|   |-- main.js			// 程序入口文件，加载各种公共组件
|-- .gitignore			// 上传github的配置，前期先不管
|-- babel.config.js		// babel配置，前期先不管
|-- package-lock.json	// 在 `npm install`时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号
|-- package.json		// 包信息，项目所需的包信息都在里面，指向`npm install`下载依赖包
|-- README.md			// 项目说明，暂时不管
.

看一下 App.vue

我们先打开看一下App.vue文件，可以发现里面的代码既熟悉又陌生。比如 html 中的内容为：

1
2
3
4
5
6
<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png">
		<HelloWorld msg="Welcome to Your Vue.js App"/>
	</div>
</template>

template标签以前讲过，这里不再讲解。

我们再看：

1
<HelloWorld msg="Welcome to Your Vue.js App"/>

是不是很熟悉？这个就是组件的使用，只是HelloWorld组件被单独放在了components文件夹里面，需要使用import引入，而以前我们都是在同一个文件中使用Vue.component()写的，这里有点小区别。

还有：

1
2
3
4
5
6
export default {
	name: 'App',
	components: {
		HelloWorld
	}
}

以前我们是直接使用new Vue()，这里使用的是export default {}，相当于提供一个接口给外界，让其他文件通过import来引入使用。

总结

当我们创建完项目再打开这些文件来看时，对于初次接触vue-cli的小伙伴来说一定会感觉很陌生，甚至会有很多疑问，这些都是正常的。我们可以打开vue-cli文档看看，慢慢了解，千万不要急躁，也可以在里面先随便尝试下，不要怕出错，如果错了实在不知道怎么改了，就把这个项目删掉，然后重新再创建项目，继续试，实在不行了，大家可以私信我，把疑问的地方提出来，我给大家讲解。

注意：import/export是ES6引入的新规范，因为浏览器引擎兼容问题，需要在 node中 用 babel 将 ES6语法 编译成 ES5语法，初学者可能有点不太明白，这里大家先这样用就可以了，用多了就明白了。