【Vue学习篇:vuejs简介、环境安装以及项目部署】

2019-04-12 admin

1、什么是vuejs vue.js是一套构建用户界面的渐进式框架。vue.js是轻量级的,与其他重量级框架不同,它被设计为可以自底向上逐层应用。vue的核心库只关注视图层,易于上手,另外vue完全有能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页应用。 官方地址:https://cn.vuejs.org/ 官方介绍:https://cn.vuejs.org/v2/guide/

2、对比其他框架 参考:https://cn.vuejs.org/v2/guide…

总的来说,vue.js适合制作企业级的应用,性能方面要更轻量、运行速度更快,而且也更为灵活,而vue学习起来也要比学习其他的要快,能够更快掌握并投入开发

3、特性

  • 轻量级的mvvm框架
  • 双向数据绑定
  • 组件通信
  • 指令,条件渲染

4、安装部署

(1)整体所需要的工具:

  • node.js环境(npm包管理器)
  • vue-cli 脚手架构建工具
  • webpack 包管理工具
  • (cnpm npm的淘宝镜像可选)

(2)安装nodejs,因为创建vue项目的时候要搭配webpack项目构建工具,而webpack在打包压缩项目的时候依赖node.js环境。 Windows环境去官网下载https://nodejs.org/en/download/ Mac环境下需要用终端先安装brew,然后再用brew install nodejs来安装node.js,执行以下命令可以安装brew。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

(3)安装cnpm,国内的淘宝镜像服务器,如果使用npm直接安装项目依赖包的话,安装起来可能会很慢(解决npm install墙内速度慢的问题,安装完后 使用:下载命令用cnpm替换npm)。 在终端执行以下命令即可安装淘宝镜像

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

另外,Mac环境下需要先获取nodejs模块安装目录访问权限,执行

sudo chmod -R 777 /usr/local/lib/node_modules/

(4)安装webpack,执行:

cnpm install webpack -g

(5)安装vue脚手架,执行:

npm install vue-cli -g

(6)环境部署好之后,就是创建项目了: 找一个合适的位置,在cmd里输入:vue init webpack vue_test(项目文件夹名),回车,等待一小会儿,依次出现‘git’下的项,可按下图操作

clipboard.png

(7)进入上面创建的项目里,然后再cmd里面运行

npm run dev

(可以先在启动之前执行npm install来安装项目依赖包,注意,最好执行npm而不要执行cnpm,从国内镜像cnpm下载到的有缺少一部分依赖库)

就可以启动项目,窗口会提示你打开http://localhost:8080/

clipboard.png

在浏览器里面输入 http://localhost:8080/ 即可打开以下页面

clipboard.png

则说明项目创建成功,可以直接在搭建起来的框架继续编写即可。

附注:我自己搭了一个vue2.0+vue-router+webpack+mint-UI+Vuex的整合框架,大家可做参考,代码放到了github

[转载]原文链接:https://segmentfault.com/a/1190000018845709

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-61589.html

文章标题:【Vue学习篇:vuejs简介、环境安装以及项目部署】

相关文章
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的<span style=“color: orange;”>“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: <script> exp...
2017-03-13
为你的 VS Code 搭建远程开发环境
开篇先说一下自己遇到的烦恼,介绍下写这篇文章的背景。我有一台低配的 MacBook 和 一台性能强悍的台式机。之前自己都是在 Mac 上跑前端项目的,那台台式机基本上处于闲置状态,偶尔用来看看文档。后来随着自己需要做服务端开发,有时候需要同...
2018-02-26
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
windows 下安装nodejs 环境变量设置
要设置两个东西,一个是PATH上增加node.exe的目录C:\Program Files\nodejs,一个是增加环境变量NODE_PATH,值为C:\Program Files\nodejs\node_modules 一、下载 去nod...
2017-03-18
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
回到顶部