1、前期准备工作-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

1、前期准备工作

简介: Hello,大家好,接下来我会以这个项目为基础更新一系列的文章,但是每天只更新一点、也只学一点,目的希望大家利用工作学习之余的碎片时间通过这个项目来学习vue和node等知识点。

Hello,大家好,接下来我会以这个项目为基础更新一系列的文章,但是每天只更新一点、也只学一点,目的希望大家利用工作学习之余的碎片时间通过这个项目来学习vue和node等知识点。希望大家都一起参与进来,动手实践,有什么问题都可以在留言或私信我一起讨论学习。文章中有什么错误也欢迎大家留言指出,共同学习,一起进步,早日走上人生巅峰。

一、git仓库

1、开始前我先在github上创建了一个仓库,大家可以fork这个仓库:商城mall;以此仓库为核心,我会把每天新完成的代码提交上去更新,一直到大家一起把这个项目做完;大家fork完以后可以同步我的仓库查看或者在我的仓库上直接做修改,有问题也可以提issue。
2、大家在github上建一个自己的项目,自己动手亲自写一遍,有问题可以查看fork的核心仓库,也可以在群里一起讨论解决问题。

好了,废话不多说了,今天的内容很简单,就是把前期的准备工作做好,环境搭好,为我们后面的项目做准备。

二、安装node环境

去官网上根据自己的电脑环境下载对应的版本;然后傻瓜式的点下一步完成完成即可,然后打开命令行输入:

img_a5689d8ac4a4ff09cbbbae3209bf41cf.png
安装成功

如果显示版本号了就证明你安装成功了。具体你可以移步我的简书一篇关于node的详细安装步骤

三、用脚手架搭建一个基于webpack的vue项目

1、命令输入
安装的步骤官网已经写得十分详细了,我就照搬过来了:

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm run dev

2、含义
安装过程中出现的命令行是什么意思呢?我简单解释下,从上到下依次的含义为:

  • 项目的名字是什么? 我们这里选默认的myproject
  • 项目的描述? 默认
  • 项目的作者?
  • 是否使用路由v-router? 我们选yes
  • 是否使用ESLint语法校检? 我们选n
    ( ps:ESLint语法校检工具可以帮你养成良好的编码习惯、规范的格式,但是每个人习惯不同,会很繁琐,所以前期我们选择不安装。)
  • 后面unit testse2e tests都是测试等相关,这里我们不于安装。
img_a46bd74eb71cb08d07e0747309ad16af.png
搭建vue项目

3、安装完成,我们进入项目启动编译
新的vue-cli脚手架构建一个新的项目的时候,连依赖都一起帮你安装好了,也就是不用进入项目后使用npm install安装依赖了,帮我们省略了一个npm install的步骤。

(1)好,现在我们进入项目,npm run启动编译:

img_84a83d9701191ce6ad33f684d4a5dcdc.png
启动编译

img_3e4618dd9f045945618da8d98f8d3e6c.png
编译完成

(2)现在我们进入浏览器中输入http:localhost:8080就可以看到一个初始化的vue项目

img_e02e5976266dfb2a05d3f4b97d30e171.png
项目搭建完成

四、其它

因为某些总所周知的原因,如果你老是用npm安装失败,可能你先需要先安装一个cnpm镜像

参考学习
https://nodejs.org/en/
https://github.com/Ewall1106/mall
https://cn.vuejs.org/v2/guide/installation.html
https://www.jianshu.com/nb/14505636

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章