Vue2.0上手教程(一)-- 教你搭建 Vue 脚手架(vue-cli)教程

Admin
Admin
Admin
52
文章
6
评论
2017年11月13日16:55:43 评论 9,212 1323字阅读4分24秒

Vue 作为前端三大框架之一GitHub地址,也是目前一个比较热门的前端框架,最新的 2.0 版本在1.0版本的基础上做了很多调整,废弃了很多api。。。Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。
说明:此文章是基于 Vue 2.0、webpack 构建的一个后台管理项目开发经验,并且参考了网上一些前人的技术分享,自己拿过来总结一下,我会将自己遇到的问题贴出,希望可以帮助到其他人,Ps:高手大神请绕道。

一、基本的环境搭建

1、安装 node.js

node.js 官网下载安装包,选择自己电脑的系统版本位数,直接点击下载,安装过程很简单,一直“下一步”就可以了(傻瓜式安装)。安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。(官网下载安装的 node.js,自带 npm 包管理工具)

2、更换镜像源

对于国内用户,建议将 npm 的注册表源设置为国内的镜像,避免安装“依赖”的时候很很慢很慢超级慢,如 淘宝 NPM 镜像,可以大幅提升安装速度。在命令行工具中运行以下语句即可使用淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org,使用方法将npm替换成cnpm:npm install => cnpm install,安装完成之后输入 cnpm -v,如下图,如果出现相应的版本号,则说明安装成功。

3、安装webpack

打开命令行工具输入:npm install webpack -g,安装完成之后输入 webpack -v,如下图,如果出现相应的版本号,则说明安装成功。

4、安装vue-cli脚手架构建工具

打开命令行工具输入:npm install vue-cli -g,安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。

就这样完成以上步骤,我们开发vue项目的环境和工具都安装好了~~~

二、使用 vue-cli 来构建项目

1、在本地新建一个文件夹存放工程使用,使用命令行 cd 到该目录下。

2、创建一个基于 webpack 模板的新项目demo,项目的名称可以自己随意,但是不要是中文。在命令行工具输入:vue init webpack demo

3、进入创建的项目目录:cd demo

4、安装项目需要的依赖:npm install,系统会根据 package.json 安装项目所需要的依赖文件,依赖文件存放在 node_modules 文件夹中,目录结构如下。

5、运行项目:npm run dev,会自动打开浏览器,并访问 localhost:8080,显示的默认页面如下。

注意:这里是默认服务启动的是本地的8080端口,所以请确保你的8080端口不被别的程序所占用。

三、vue 项目打包

1、打包项目:npm run build,将项目打包成可发布的状态,上传到服务器。

2、上传文件到服务器:打开项目目录 dist 文件夹,将 static 文件夹和 index.html 直接上传到服务器的根目录。

博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~

继续阅读
Admin
  • 本文由 发表于 2017年11月13日16:55:43
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
Vue 中计算属性和侦听器 前端开发

Vue 中计算属性和侦听器

在 Vue 中通常我们会在模板绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句,那么整个模板就会变得特别的臃肿,可读性和维护性将会降低,因此为了简化逻辑,我们可以使用计算属...
浅谈 JS 中的防抖和节流操作 前端开发

浅谈 JS 中的防抖和节流操作

一般在进行窗口的 resize、scroll 等输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用 debounce(防抖)和 thr...
JS中的「import」和「require 」的区别 前端开发

JS中的「import」和「require 」的区别

import 和 require 是 JS 模块化编程使用的,模块化是一种将系统分离成独立功能部分的方法,一个模块是为完成一个功能的一段程序或子程序,"模块"是系统中功能单一且可替换的部分。模块化思想...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: