Vue入门（十一）

开始一个 Vue 项目——Vue3.0环境搭建

创建项目

根据官网提供的命令 vue create hello-world 创建一个项目，命令标红的部分是项目名可以自定义。

        注意：切换到你要创建项目的目录，然后使用命令创建项目，不然项目创建后可能自己找不到了，要创建在自己知道的地方。

 

输入命令回车后等待一会进入以下界面：

问你是用 Vue3 还是 Vue2 或者自定义，这里选择 Manually select features，然后回车。

回车后进入以下界面：

        这里按上下键进行选择，按空格键进行选中（不是按回车）

选中以下配置后回车：

 

回车后选择 Vue.js3.X 版本再回车

这一步选择 Y（回车）

这一步选择第一个（回车）

这一步选择 In dedicated config files（回车）

最后问是否创建预设名

官网说明：

1. 如果你决定手动选择特性，在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。
2. 一个 Vue CLI preset 是一个包含创建新项目所需预定义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们。

如果选择创建预设名，那么下一次须要创建相同配置的项目就不需要再手动配置，直接选择预设名进行项目的创建，像一个自定义的默认项目

出现一下界面说明项目创建成功：

 

用编辑器运行项目如下：

编辑器打开项目目录：

node_modules：存放项目依赖

public:

        favicon.ico：页签图标

        index.html：主页面

src：

        assets：存放静态资源

        component：存放一般组件

        router：配置路由

        store：配置状态管理

        views：存放路由组件

        App.vue：根组件（汇总所有组件）

        main.js：入口文件

.browserslistrc：配置兼容浏览器

.gitignore：git 版本管制忽略的配置

babel.config.js：babel 的配置文件

jsconfig.json：主要用来配置一个默认根路径，以后可以通过该根路径快速访问到子路径

package.json：包管理文件

package-lock.json：所有包的具体信息

README.md：项目文档

---

视频学习地址：

课程导学，vue3.0实现todolist 教程-慕课网 (imooc.com)