【vue2第八章】工程化开发和使用脚手架和文件结构

vue工程化开发 & 使用脚手架VUE CLI:

1,核心包传统开发模式:基于js/html/css直接引入核心包开发vue。
2,工程化开发。基于构建工具如(webpack)的环境中开发vue。

vue cli是什么:

vue cli是一个vue官方提供的一个全局的命令工具.
可以帮助我们快速的创建一个开发vue项目的标准化基础架子【集成了webpack配置】

好处

  1. 开箱即用,0配置。
  2. 内置babel等工具.
  3. 标准化.

使用步骤

  1. 全局安装(一次):yarn global add @vue/cli 或者使用npm npmi @vue/cli -g
  2. 查看vue的版本: vue --version
  3. 创建项目的架子:vue create project-name (项目名-不能用中文)
  4. 启动项目: varn serve npm run serve (找package.json)

【vue2第八章】工程化开发和使用脚手架和文件结构_第1张图片
1.使用vscode打开需要创建项目的文件夹。或者打开指定文件夹,在打开命令窗口。
使用vue create project-name创建demo项目。
【vue2第八章】工程化开发和使用脚手架和文件结构_第2张图片
要使用vue3就可以选择创建vue3项目,我这里选的vue2.
然后这里需要等待一段时间。
【vue2第八章】工程化开发和使用脚手架和文件结构_第3张图片

然后cd到项目文件中。cd demo 使用 npm run serve 启动项目。
启动成功按住ctrl点击链接。
【vue2第八章】工程化开发和使用脚手架和文件结构_第4张图片

这样一个项目的基础框架就搭建成功。

这里启动项目时为什么命令时 npm run serve
这个启动名称实在 package.json里面配置的。

【vue2第八章】工程化开发和使用脚手架和文件结构_第5张图片
可以将这里面的serve改为其他的单词字母,然后使用 npm run 改过之后的单词也可以成功把项目运行起来。

项目的文件结构的各个用途:
使用npm安装的vue是没有yarn.lock文件
【vue2第八章】工程化开发和使用脚手架和文件结构_第6张图片
项目运行流程
【vue2第八章】工程化开发和使用脚手架和文件结构_第7张图片

你可能感兴趣的:(vue,vue.js,前端,javascript,html,开发语言)