Vue2.0最全入坑指南(初识篇)

前言

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

安装 node.js/git

未安装 node.js、git 的同学请戳这里Node 本地环境搭建

安装 webpack(选装)

npm install webpack -g

输入 webpack -v 版本检测：

xxx@xxx-PC MINGW64 /
$ webpack -v
3.1.0

PS: -g 代表全局安装，最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack

安装 vue-cli

npm install vue-cli -g

输入 vue -V(大写)安装检测：

xxx@xxx-PC MINGW64 /
$ vue -V
2.8.1
xxx@xxx-PC MINGW64 /
$

PS: 正确输出版本号代表安装成功,如果提示“无法识别 ‘vue’ ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本

vue 项目初始化

在你喜欢的目录下新建文件夹，例如（D:\vue2）,cd 切换至该目录
vue init webpack xxx-project(项目名称)，默认回车安装

cd d:/vue2
vue init webpack

PS:安装到 Use ESLint to lint your code?
这里的时建议选 N,如果为 Yes 在我们编写程序的时候会严格按照 ESLint 语法进行检测，很容易出错。
运行到 Documentation can be found at https://vuejs-templates.github.io/webpack 可以按 Ctrl+C 退出

安装依赖包

npm install或cnpm install(推荐)

PS：等待几分钟。。。cnpm 较快建议使用

运行第一个 vue 项目

接下来执行 npm run dev

npm run dev或cnpm run dev

效果：

PS:看到上面的界面，就代表我们的第一个 vue 运行成功了！！！

错误处理：

看到上面的错误信息，可以断定咱们的端口号被占用了。 修改端口号：config>index.js—->port:8000
，然后再运行 npm run dev

打上线包

项目开发完成之后，可以输入 cnpm run build 来进行打包工作

cnpm run build

PS:打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看 项目上线时，只需要将 dist 文件夹放到服务器就行了

结语

到这里我们已经初步体验了一把 vue2.0,是不是感觉也没那么复杂,本篇为初识篇，后面将会在本博客继续我们的 vue2 入坑之旅,请持续关注本博客Tigerliu Blog，喜欢可收藏分享！！！

vue 相关链接：
vue 中文官网
vue 中文社区
vue 中文 API
vue 中文教程
vue 菜鸟教程

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦