不使用Vue-CLI构建Vue项目

最近半年,主要的学习重心都是放在Vue这款框架上面,我发现我的学习过程有点颠倒,所以最近一周花了些时间尝试不使用Vue CLI来构建Vue项目。我不是个前端开发人员,只是为了兴趣和保持技术判断力而了解这款框架,所以有不对的地方还请各位看官指出。

第一步:开发必备

Node.js和NPM请自行安装。

第二步:版本信息

Node.js:10.11.0

NPM:6.4.1

Webpack:4.26.1

Vue:2.5.17

其它的可以参见项目中的package.json。

第三步:初始化

新建一个文件夹,我这里的路径如下:

在命令行中执行如下命令:

如下图输入一些必须信息,如果只是本地开发使用,随便输入即可:

确定后,目标文件下就会出现package.json文件,如下图:

第四步:必需文件

新建src文件夹,增加App.vue和main.js,其中App.vue内容如下:

main.js内容如下:

新建index.html,文件内容如下:

文件夹内的整体结构如下:

第五步:安装依赖

在CMD命令行窗口中执行:

执行完毕后,package.json中会增加以下部分:

文件内容如下:

第七步:其它&运行

在package.json中的"scripts"增加:

增加.babelrc文件:

在CMD命令行中输入:

第八步:运行结果

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181211G06RXX00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券