Vue项目实战---创建项目（一）

本节主要讲的是vue项目的创建

一、官网：

介绍 | Vue CLI

二、安装Vue CLI

使用Vue CLI 创建项目

1、需要先安装node.js

2、需要安装Vue CLI

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

如果安装时，报权限不够，

使用sudo

sudo npm install -g @vue/cli

检查是否安装成功：

vue --version

还需要安装yarn管理器

yarn管理器，在cmd窗口安装一个yarn管理器即可

npm install -g yarn

三、创建项目

通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

1、点击创建

2、选择项目所在的路径

3、填写项目名称

4、点击下一步

 5、选择手动配置项目

 6、选择功能

我们只需要勾选Babel 与 Router这两个项目就可以 了。

千万别勾选Lintest / Formatter。这个是校验代码格式的，需要遵循一定的书写规范，不然会报错，但是我们不是专业的前端，不了解这个规范，所以不要勾选。

7、选择vue版本，我们这里选择2.x就可以了

8、可以保存为预设（如果下次想直接用刚刚的配置），也可以不保存为预设。

四、项目介绍

使用工具HBuilderX 打开刚刚创建的项目。

文件--导入--从本地目录导入

项目结构：

 node_modules: 依赖包存放的路径

src：代码的路径

main.js,整个项目的运行入口。

 

main.js 中，将Vue对象，挂在到 了App.vue文件中的，id="app" 标签中。

App.vue，才是核心代码文件。

App.vue，主要包含三部分内容。