环境搭建

本章节的主要内容是讲解我们在开发vue项目的前置准备, 如环境搭建, 如何创建项目, 项目目录划分等

环境搭建

要搭建vue的项目开发环境, 首要条件是, 你的电脑必须安装有nodejs

nodejs安装教程可参考这篇文章: Nodejs安装教程 | 鹊桥科技 (ssos.live)

除了必要的nodejs环境之外, 我们还需要全局安装vue脚手架, 以管理员方式打开命令行窗口, 输入以下命令(电脑必须已经安装好nodejs)

npm i @vue/cli -g 

下载好后, 输入以下命令, 假如有版本号输出的话, 就代表安装成功了

vue -V

注意, -V 是大写开头

效果如下图:

---

创建项目

环境配置好之后, 我们就可以开始创建我们的vue项目了

首先, 在你电脑上随便新建一个目录, 然后按下键盘的 shift + 鼠标右键, 选择 在此处打开 powershell窗口

在打开的命令行中, 输入以下命令

vue create demo

• vue create 代表要创建一个项目
• demo 代表项目名, 项目名叫什么都无所谓, 你可以随便写, 但是最好是写英文名

在接下来的各个步骤中, 命令行都会向你提问, 你可以通过键盘的 ↑↓键进行切换, 按下回车进行选择, 选项参考如下

1. 选择 Manually select features

2. 步骤2, 这里是多选题, 我们可以按下空格进行选择某一项, 选完后, 按回车进入下一步

3. 选择 2.x

4. 选择 Sass/SCSS (with dart-sass)

5. 选择 In dedicated config files

6. 输入 N

7. 最后, 等它自动下载好, 这个速度视网络而定, 过程可能有点小久

8. 当出现下图, 就代表项目创建成功了, 同时可以看到我们的目录下也多了一个 demo 文件夹

9. 观察上图, 你可以看到, 它提示我们, 我们可以直接在当前命令行中, 执行以下2个命令, 就可以启动我们的项目了

cd demo
yarn serve

cd demo 代表进入demo文件夹内

yarn serve 代表启动项目

10. 当我们执行好上面2个命令后, 命令行窗口会输出以下地址, 随便复制一个, 进入浏览器打开, 就能看到效果了

11. 浏览器打开其中一个链接, 效果如下

---

项目目录

我们通过之前的步骤已经创建好了项目, 并且也得到了一个demo文件夹, 这个文件夹里其实就是我们的项目文件, 主要结构如下:

其中我们需要关注的文件夹就是 src , 因为我们在开发页面时, 主要就是在这个文件夹里进行开发的, 包括我们所有的页面文件, 组件, 图片素材啥的都是在这里面进行创建和编辑的

---

目录结构

当我们按照先前的步骤创建好项目之后, 就可以看到我们的项目文件夹里的内容了, 首先我们得明白它里面的文件和目录都有啥, 且它们都有啥作用

public # 存放项目中需要用到的静态资源, 且这些资源不参与webpack打包, 例如图片,图标等等

src # 存放项目的核心文件, 前端项目开发中, 几乎所有的开发工作都集中在这个文件夹内进行
	assets # 静态资源文件, 与public文件夹类似, 区别在于assets里的静态资源参与webpack打包
	components # 存放公共的页面组件
	App.vue # 根组件
	main.js # 入口文件

.browserslistrc # 项目浏览器兼容性配置的

.gitignore # 配置git忽略跟踪的文件或目录

babel.config.js # babel配置

package.json # 项目依赖记录

yarn.lock # 项目依赖记录

README.md # 项目说明文档

其中最重要的就是 src 这个目录了, 我们日常的项目开发工作几乎都集中在这里面, 例如我们要创建一个页面文件, 也是在这里面进行创建与配置的