vue工程化开发 & 使用脚手架VUE CLI:
1,核心包传统开发模式:基于js/html/css直接引入核心包开发vue。
2,工程化开发。基于构建工具如(webpack)的环境中开发vue。
vue cli是什么:
vue cli是一个vue官方提供的一个全局的命令工具.
可以帮助我们快速的创建一个开发vue项目的标准化基础架子【集成了webpack配置】
好处 :
- 开箱即用,0配置。
- 内置babel等工具.
- 标准化.
使用步骤:
- 全局安装(一次):
yarn global add @vue/cli
或者使用npmnpmi @vue/cli -g
- 查看vue的版本:
vue --version
- 创建项目的架子:
vue create project-name
(项目名-不能用中文) - 启动项目:
varn serve
或npm run serve
(找package.json)
1.使用vscode打开需要创建项目的文件夹。或者打开指定文件夹,在打开命令窗口。
使用vue create project-name
创建demo项目。
要使用vue3就可以选择创建vue3项目,我这里选的vue2.
然后这里需要等待一段时间。
然后cd到项目文件中。cd demo
使用 npm run serve
启动项目。
启动成功按住ctrl点击链接。
这样一个项目的基础框架就搭建成功。
这里启动项目时为什么命令时 npm run serve
这个启动名称实在 package.json里面配置的。
可以将这里面的serve改为其他的单词字母,然后使用 npm run 改过之后的单词
也可以成功把项目运行起来。
项目的文件结构的各个用途:
使用npm安装的vue是没有yarn.lock文件