Vue框架构建

253 阅读1分钟

在我们的学习过程中,都是通过标签引入JavaScript库的方式来使用Vue指令的。在学习过程中,这无疑是一个最佳的选择,可以不考虑那些繁琐的配置而只关注于语法本身。但在实际的项目开发中会伴随着这种各样的依赖,如果每次都下载js文件并引入,对于项目的迁移和维护将会耗费大量的时间和精力,看到这我们就想到了解决的方式:Node的NPM管理

如果想不到这一块,可以先看看:Node.js快速入门

借助于NPM工具并集成了一些模块(Vuex、Router),Vue逐渐形成了自己的一套开发框架,我们使用它就不单单是使用Vue.js这个库了。这个框架我们可以用CLI(脚手架)工具来安装到本地,直接打开即可:

1.首先需要安装Vue的脚手架:npm install -g @vue/cli,安装完成之后通过vue --version即可查看:

image-20200728222206994

2.安装成功后,我们就可以开始Vue框架的搭建了。输入:vue ui就可以进入网页端的图形化界面:

image-20200728222422217

3.选择好路径之后就可以开始了,在预设中手动的配置我们需要的模块:

image-20200728222513221

4.选择常用的模块:

image-20200728222605764

5.选择完毕后,就可以在后台看到下载的进度啦:

image-20200728222632665

6.下载完毕后,使用VSCode/WebStorm打开即可。

观察package.json就可以看到启动命令:

image-20200728223050161

我们打开终端输入:npm run serve,就可以成功启动一个Vue项目。

image-20200728223208765