小菜鸟vue入坑指南

648 阅读2分钟

vue是一款构建用户界面的渐进式框架,他是一款基于MVVM的框架,说到这里,简单说一下我们在设计软件的时候的思想,设计软件的时候是基于MVC的架构;

首先 M: Model:可以简单的理解为就是我的data中return回来的数据,v: view:是我的视图层,可以理解为我的template, 而c:controller 可以理解为methods,就是将我的Model与view联系起来,这就是基于vue对mvc的理解;

首先 ,我们在电脑安装vue的环境配置:(基于vue-cli去搭建项目)

1.在电脑安装node,node官网地址: nodejs.org/zh-cn/ 直接傻瓜式安装操作;(检查是否安装成功: node -v;)

2.检查npm是否安装成功

3.然后全局安装vue-cil:npm install -g vue-cli(考虑到使用npm比较慢,大家可以安装淘宝镜像cnpm) npm install cnpm -g

cnpm install -g vue-cli

如果不小心安装错误,使用 npm cache clean来清理缓存,注意安装失败后,建议清楚缓存之后,再重新安装;

4.安装完成之后,使用vue -V 来检查啊是否安装成功;

5.进入你要创建项目的文件夹,在这个文件夹下面输入:

6.回车,接下来出现的英文表示:

Project Name:要创建的项目名称(该命令会生产一个package.json文件,文件中的name选项就是这个ProjectName,默认为当前创建的项目目录名称,也可以自行制定(但是需要符合package.json中name命名规则,不要出现大写字母,空格,下划线,可以使用 - )

Project Description:项目简介,也会出现在package.json文件中,可选

Author:作者,可选

下一步直接回车

Install vue-router:是否安装vue路由组件,做项目的话一定要安装

Use ESLint to lint your code:是否需要使用ESLint模块进行代码检测

Setup unit tests with Karma + Mocha?:是否安装测试(单元测试)

Setup e2e tests with Nightwatch?:是否安装端到端的测试

完成上面步骤,over!

这就是一个简单的使用vue-cli搭建一个工程的例子;

下面就是利用vue-cli搭建的项目目录:

---------------------------我是华丽丽的分割线----------------------------------------------------------