安装node.js

node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了。
安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。

安装cnpm

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待,安装完成如下图。
如果输入cnpm提示不是有效的命令,则cnpm 安装失败。
如果是Mac OS 系统,需要注意系统权限 最好在每一句命令前面加上 sudo。
 

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

在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。
通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。
 
找到一个项目目录,在命令行中运行命令 vue init webpack project-name 。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中project-name是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中,如下图。
解释一下每个问题是什么意思:
Project name :项目名称
Project description 项目描述
Author 作者
Install vue-router?是否安装vue路由组件,选择是,因为此项目会用到
Use ESLint to lint your code ? 是否使用eslint来检测代码风格,否。
Setup unit tests with Karma+Mocha? 是否安装测试,否。
Setup e2e tests with Nightwatch?单元测试?否。
 
 
可一路回车。
 
说一下Mac OS可能会遇到的权限问题 vue init webpack project-name
提示 没有权限,无法访问。
这时使用 sudo vue init webpack project-name 提示输入密码,完成后成功安装。
 

安装项目所需的依赖

要安装依赖包,首先cd到项目文件夹(project-name文件夹),然后运行命令 cnpm install ,等待安装。
 
安装完成。
 

运行项目

在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
这里简单介绍下 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。
 
 
打开浏览器输入http://localhost:8080即可看到
 
 
 
这是项目的初始化

vue基础项目安装教程的更多相关文章

  1. Vue基础项目模板

    https://github.com/wanglong/vue-element-admin.git 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍 一站式开源运维平台,分享给大 ...

  2. vue.js项目安装

    Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...

  3. vue开发项目详细教程(第一篇 搭建环境篇)

    最近做vue做项目碰到了不少坑,看了三天文档便开始上手做项目了,不是我牛b,是因为项目紧,我没有时间去深入学习,所以只能一边学一边做了. 我要做的项目是一个官方网站(包括管理后台),也因为是我第一次使 ...

  4. Vue基础项目配置

    一,使用Vuejs搭建项目需要一些基础配置,这样能使的编程过程事半功倍 1.首先下载nodejs,然后使用nodejs使用NPM命令下载VueCli3.0以上的Vue脚手架.通过脚手架可以使用Vue  ...

  5. 关于VsCode创建Vue基础项目的步骤以及相关问题

    项目创建步骤: 1.  全局安装vue-cli 安装命令: npm install -g vue-cli 在vscode上打开一个终端,然后输入此命令(下为截图): 2. 安装webpack,打包js ...

  6. [Docker基础]Docker安装教程

    Install Docker Docker支持几乎所有的Linux发行版,也支持Mac和Windows. 各操作系统的安装方法可参考Docker官网. 安装环境 ubuntu 16.04 Docker ...

  7. 【vue】vue.js安装教程/vue项目搭建

    前提:已安装nodejs——npm  (备注教程  “物理安装”  ) 第一步:建了一个managerSys文件夹,用于保存项目 第二步:从cmd进入该文件夹,之后开始安装vue.js相关 1)在该项 ...

  8. 【强烈推荐,超详细,实操零失误】node.js安装 + npm安装教程 + Vue开发环境搭建

    node.js安装 + npm安装教程 + Vue开发环境搭建 [强烈推荐,超详细,实操零失误] 原博客园地址:https://www.cnblogs.com/goldlong/p/8027997.h ...

  9. Vue框架下的node.js安装教程

    Vue框架下的node.js安装教程 python服务器.php  ->aphche.java ->tomcat.   iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...

随机推荐

  1. 异常System.BadImageFormatException

    [问题描述] Server Error in '/' Application. Could not load file or assembly 'WebDemo' or one of its depe ...

  2. MySQL大数据表水平分区优化的详细步骤

    将运行中的大表修改为分区表 本文章代码仅限于以数据时间按月水平分区,其他需求可自行修改代码实现 1. 创建一张分区表 这张表的表字段和原表的字段一摸一样,附带分区 1 2 3 4 5 6 7 8 9 ...

  3. Vue以CDN方式调用Swiper轮播异常

    问题概览: 有一个小型单页应用项目,嫌用组件式调用vue-swiper麻烦,因此以CDN的方式调用swiper,结果轮播的图不动了! 爬了半天百度和谷歌都无解决方案,最后曲线救国的方式解决了问题. 解 ...

  4. windows环境下lib和dll的区别和联系详细

    https://blog.csdn.net/ghevinn/article/details/43759655 c++中共有两种库:1.LIB包含了函数所在的DLL文件和文件中函数位置的信息(入口),代 ...

  5. 解决:Host xxx.xxx.xxx.xxx is blocked because of many connection errors.

    Host "xxx.xxx.xxx.xxx" is blocked because of many connection errors 1.原因:当使用错误的密码连接mysql时, ...

  6. 3.1Python的判断选择语句

    返回总目录 目录: 1.if单分支语句 2.if else 双分支语句 3.if elif ...else多分支语句 4.if 嵌套语句 判断语句总览: (一)if单分支语句: 语法: if 条件: ...

  7. mac brew安装mysql

    mac不自带mysql,这里需要重新安装,方法依然很简单 brew install mysql unset TMPDIR mysql_install_db --verbose --user=`whoa ...

  8. swift类型擦除的定义-swift的类型擦除只是一个类型高低阶转换的游戏。

    所谓swift的类型擦除是指: moand转换: 通过技术手段(通常是包装器),将具体类型的类型信息擦除掉了,只将类型的(某一个侧面的)抽象信息(通常指的是类型尊从的协议.接口.或基类)暴露出来. A ...

  9. 3675: [Apio2014]序列分割

    Description 小H最近迷上了一个分隔序列的游戏.在这个游戏里,小H需要将一个长度为n的非负整数序列分割成k+1个非空的子序列.为了得到k+1个子序列,小H需要重复k次以下的步骤: 1.小H首 ...

  10. [USACO2004OPEN]Cave Cows 3

    嘟嘟嘟 看完题后突然想起jf巨佬的话:"看到曼哈顿距离就想转切比雪夫距离." 于是我就转换了一下. 然后问题变成了求 \[max_{i, j \in n} \{ max \{ |x ...