Vue笔记:使用node开发vue入门实例
安装NPM
首先在命令终端输入 npm -v 检测是否安装 npm。如果没有,按照下面教程进行安装。
下载地址: nodejs中文网
到官网下载自己系统对应的版本,这里我们下载Windows系统的64位zip文件,下载完成后解压,可以看到里面有一个node.exe的可执行文件。
把Node添加到系统环境变量里面,打开cmd命令行,输入npm -v,如果出现如下图的显示,说明已经安装正确。
如果你安装的是旧版本的 npm,可以通过 npm 命令进行升级。
sudo npm install npm -g #linux
npm install npm -g # windows
可以看到升级之后,再次执行 npm -v 查看版本已经升级到 6.4.0 了。
更多NodeJS教程可以参考以下资料
菜鸟学堂:https://www.runoob.com/nodejs/nodejs-tutorial.html
安装 webpack
安装好 npm 之后,就可以通过 npm 命令来下载各种工具了。
安装打包工具 webpack,-g 表示全局安装。
npm install webpack -g
更多NodeJS教程可以参考以下资料
菜鸟学堂:http://www.runoob.com/w3cnote/webpack-tutorial.html
安装 vue-cli
安装 vue 脚手架项目初始化工具 vue-cli,-g 表示全局安装。
npm install vue-cli -g
淘宝镜像
因为 npm 使用的是国外中央仓库,有时候下载速度比较“喜人”,就像 Maven 有国内镜像一样,npm 在国内也有镜像可用。这里建议使用淘宝镜像。
安装淘宝镜像,安装成功后 用 cnpm 替代 npm 命令即可,如: cnpm install webpack -g 。
npm install -g cnpm --registry=https://registry.npm.taobao.org
创建项目
通过 vue-cli 生成一个项目,如下面是生成一个名为 myproject 的项目。
vue init webpack myproject
输入以上命令之后,安照提示,输入相应的内容即可。
$ vue init webpack kitty -- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. --这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 kitty
? Project name (kitty) --项目名称
? Project name kitty
? Project description (kitty project) --项目描述
? Project description kitty project
? Author Louis -- 项目创建者
? Author Louis
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) -- 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n --是否启用eslint检测规则,这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "kitty".
To get started: -- 这里说明如何启动这个服务
cd kitty
npm install
npm run dev
项目结构
生成的项目目录结构如下图所示。
目录说明(截图来自菜鸟学堂):
安装依赖
进入项目目录,这里是 kitty 目录。
执行安装命令,会下载安装依赖的模块,下载的依赖会安装到 node_modules 目录。
npm install # 淘宝镜像用 cnpm
启动运行
依赖下载安装完成之后,就可以启动运行了。输入以下命令启动。
npm run dev
如果出现下面的提示,表示启动成功,浏览器访问显示地址,会出现一个vue的欢迎页面。
I Your application is running here: http://localhost:8088
编译打包
开发完成后,通过以下命令就可把整个项目打包,生成到 dist 目录下,直接拷贝到服务器即可。
npm run build
作者:朝雨忆轻尘
出处:https://www.cnblogs.com/xifengxiaoma/
版权所有,欢迎转载,转载请注明原文作者及出处。
Vue笔记:使用node开发vue入门实例的更多相关文章
- 【Vue笔记】-- 详解vue生命周期
针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...
- Vue笔记:webpack项目vue启动流程
VUE启动流程 1. package.json 在执行npm run dev的时候,会在当前目录中寻找 package.json 文件, 有点类似 Maven 的 pom.xml 文件,包含项目的名称 ...
- vue系列之webstrom开发vue,无法热更新
用vue-cli构建了项目之后在webstorm开发,用npm run dev跑本地服务,经常修改之后在浏览器刷新没反应,偶尔才会有刷新,需要重新跑一遍npm run dev才会更新,这是怎么回事呢? ...
- python学习笔记:接口开发——flask Demo实例
举例1,返回当前时间接口 ''' 初始化:所有的Flask都必须创建程序实例, web服务器使用wsgi协议,把客户端所有的请求都转发给这个程序实例 程序实例是Flask的对象,一般情况下用如下方法实 ...
- 转-Vue.js2.0从入门到放弃---入门实例(一)
http://blog.csdn.net/u013182762/article/details/53021374 标签: Vue.jsVue.js 2.0Vue.js入门实例Vue.js 2.0教程 ...
- Vue项目入门实例
前言 本文记录Vue2.x + Element-UI + TypeScript语法入门实例 为什么要用TypeScript? 1.TypeScript是JavaScript的超集,利用es6语法,实现 ...
- Vue.js2.0从入门到放弃---入门实例
最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用 ...
- spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
- spring boot + vue + element-ui全栈开发入门——开篇
最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...
随机推荐
- onsyscommand
简介 OnSysCommand()这个函数主要是截获控制命令的,msdn上的解释如下: The framework calls this member function when the user s ...
- multiprocessing、threading、gevent区别
1. 进程是资源分配的单位 2. 线程是操作系统调度的单位 3. 进程切换需要的资源很最大,效率很低 4. 线程切换需要的资源一般,效率一般(当然了在不考虑GIL的情况下) 5. 协程切换任务资源很小 ...
- 模块import,from ..import...
首次导入模块发生3件事 1.创建一个模块的名称空间 2.执行文件spam.py,将执行过程中产生的名字都放到模块的名称空间中 3.在当前执行文件中直接拿到一个名字,该名字就是执行模块中相对应的名字 f ...
- 关于Linux学习中的问题和体会
本科期间未开展过与之相关的课程,所以初次接触Linux难免有些问题!参照老师给的学习资料中内容,逐步解决了一些问题,但还有一些问题没解决,下面列举出自己遇到的一些问题. 1.在环境变量与文件查找专题中 ...
- Java的StringBuffer和StringBuilder类
StringBuffer (字符串缓冲对象) 概念:用于表示可以修改的字符串,称为字符串缓冲对象 作用:使用运算符的字符串将自动创建字符串缓冲对象 例如: str1+str2的操作,实际上是把str1 ...
- codeforces 982 c
给你一棵树 让你进行切割 问你最多能切多少刀 使得每个连通分量size都是偶数 思路:首先 要是有奇数个节点的话 那么不管你怎么切割 都会有一个连通分量的size是奇数 所以只有偶数的情况 ...
- jQuery插件初级练习2答案
html: $.font($("p"),"30px").html("变化了") jQuery: $.extend({ font:functi ...
- hdu4742
题意:给定3维的n(<=100000)个点,求最长不下降子序列长度(对于1和2两个点,2可以放在1后面,x1<=x2,y1<=y2,z1<=z2 ),并求出有多少种方案. 思路 ...
- Visualise the Argyris basis functions
""" Author: kinnala Visualise the Argyris basis functions. """ from sk ...
- 3.insert添加用法
一.新增用户接口 UserMapper.java package tk.mybatis.simple.mapper; import org.apache.ibatis.annotations.Para ...