资讯专栏INFORMATION COLUMN

从 0 开始,vue 项目实战(一)

wawor4827 / 2509人阅读

摘要:前言从开始开发一个的项目。下载首先需要下载一个命令行工具,话说我是电脑管家里面直接下载的,也可以点这里下载如果有的话就不需要了,自带的命令行也是可以的。使用命令行然后新建个文件夹放你的项目,进入文件夹,右键打开命令行工具。

前言

从 0 开始开发一个 vue 的 SPA 项目。
如果你还没有学习过 vue,请先按照 官网 或者 社区 的教程做一遍。
像这样,做几个例子,不然的话看这篇文章的意义不大。

这篇文章比较适合已经跟着官网的例子做了一遍的朋友们看。
技术栈

vue2 + vuex + vue-router + mint-ui + zepto + es6 + less
另外参考了小伙伴提供 vue项目例子,大家也可以去看一下。

环境搭建
如果你已经跟着教程做一遍了,那么接下来可以来做项目了

以前我只会写点jquery ,会一点切图,对 vue 并没有怎么了解。
虽然说 jquery 已经很方便开发了,操作 dom 非常的方便,然而 vue 不用操作 dom 让我觉得原来可以这么简单。
大家是不是还经历过这样的项目结构呢?

一直以来我觉得这样子就可以了,想要什么就去插件网上下载就好了,比如 jquery,jquery.datepicker 等等。
这完全没有什么问题,在我还只会切切图的时候我就是这样的项目结构。
然而现在需要搭建一个复杂一点的环境,这会帮助我们做一些 合并压缩,热更新,自动化等等一些麻烦事,方便我们的开发。
我们不再推荐下载 vue.js 到 js 文件夹,然后 html 里面引入使用。
然而写这些配置是相当麻烦的一件事,这里 vue-cli 帮助我们很好的解决了这个问题。
它能自动帮助我们生成一些配置和基础项目。
它生成的项目结构是这样子的。
(~ ̄▽ ̄)~

不得不说真是方便呢,如果对前端工程化一点基础的没有,是不是瞬间懵逼呢? (。・∀・)ノ゙
是的,刚开始我也觉得这个很奇怪,为什么要弄的这么复杂,难道以前那样子不好吗?<( ̄ˇ ̄)/
我以前的话基本上是写个模板,然后扔给后端,让后端去使用这个模板,现在前后端分离了,自然而然前端就需要一个项目,当然不能像之前那么简单啦,以前那样的目录只是方便后端使用而已。(○´・д・)ノ
压缩编译这些东西都得前端来解决,不能再像之前那样子了。

那么,跟着下面的步骤一步步搭建好环境吧。

1、下载 Git
首先需要下载一个命令行工具,话说我是QQ电脑管家里面直接下载的,也可以点这里下载
如果有的话就不需要了,win10 自带的命令行也是可以的。

2、下载 node
然后下载一个node。

3、使用命令行
然后新建个文件夹放你的项目,进入文件夹,右键打开命令行工具。

4、使用淘宝镜像资源 cnpm
输入下面这个东西,安装淘宝镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org

这个比 npm 好用。

输入一下指令看是否安装完成。

如果安装失败请尝试清一下缓存再安装!

npm cache clean

5、安装 webpack vue-cli

cnpm install -g vue-cli
cnpm install -g webpack

输入一下 -v ,测试是否安装成功

6、生成项目
只要输入这三个东西之后一直 n 回车就好了,至于下面那堆是什么暂时就不管了。(⊙v⊙)
第一遍如果等待时间太长 直接 ctrl + c 跳出就好了。

到这里项目已经生成完毕了,你可以在目录下面看到你生成的项目了。

7、启动项目
然后按照提示安装一下以来,我们就可以看到页面了。

cd menu
cnpm install && cnpm run dev


恭喜恭喜,我们已经成功的搭建了一个项目了,接下来我们需要一款编辑器,如果你使用其他编辑器也是可以的。

8、下载编辑器 vscode

再装一下 vscode 里面的一些插件

安装了记得开启 主题文件图标主题

项目结构

到这里我们就搭建好了需要的开发环境,接下我们就可以开始开发了。

package.json 保存了我们刚才安装的选项和依赖。 

最后
如果有什么想跟我讨论的话,请私信。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91195.html

相关文章

  • webpack+vue项目实战(三,配置功能操作页和组件的按需加载)

    摘要:但是实际上,回款管理和开票管理的组件文件也是加载了。所以下面引用按需加载来处理。是不是小很多了,然后和是按需加载的,就是需要的时候才加载。 1.前言 上篇文章(webpack+vue项目实战(二,开发管理系统主页面)),实现了,侧边栏的一个操作,点击侧边栏的一些操作,最重要的就是路由的切换。看了上一篇的伙伴也不难发现,除了点击侧边栏‘首页’之外,点击其它的都是白色的一片。原因我想大家都...

    endless_road 评论0 收藏0
  • webpack+vue项目实战(五,监听路由,实现同个页面不同状态的切换)

    摘要:好了,闲话不多说今天要说的时利用监听路由的方式,实现同个页面不同状态的切换。只要等于,那么页面就是待确认回款页面进入待确认回款页面中,回款状态的筛选标签要加上。 1.前言 今天发完这一篇,就要这个系列告一段落了!以后如果有什么要补充的会继续补充!因为在后台管理项目上,搭建的话,主要就是这样了!还有的一些是具体到交互的处理,那个是要根据后端的需求,来进来比较细化的工作,我在这里就不说了!...

    guyan0319 评论0 收藏0
  • 新手福音!用vue-cli30到1做个完整功能手机站(

    摘要:开篇从今天起,小肆将和大家从头开始做一个完整的实战项目。关注技术放肆聊跟小肆一起行动起来在这个项目中,小肆力争做到以下几点应用目前最新的技术,并随时间更新。 开篇 从今天起,小肆将和大家从头开始做一个完整的实战项目。其中遇到的每个知识点都是我们工作中常见的,这些知识点大多在网上都能找到但却没有哪个教程能都讲得到,那就由小肆来做吧。 关注技术放肆聊,跟小肆一起行动起来! 在这个项目中,小...

    stefan 评论0 收藏0
  • 0 开始vue 项目实战(二)

    摘要:前言在上一篇文章,已经搭建好所需要的开发环境了接下来让开发一个简单的项目吧。检测路由变化获取数据这三个方法都是改变地址栏然后通过检测地址栏变化去请求数据。项目结构最后如果有什么想跟我讨论的话,请私信。 前言 在 上一篇文章 ,已经搭建好所需要的开发环境了,接下来让开发一个简单的项目吧。关于 less 我就不贴代码了。 源码地址 正题 先对默认的文件进行改造一下。删除了默认的 App.v...

    freecode 评论0 收藏0

发表评论

0条评论

wawor4827

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<