(vue01)vue环境搭建
腾讯,百度,网易....这么大媒体平台咋老推送这么lower的信息? 你们不缺钱啊....我这么善良的孩子都别你们带坏了
强烈鄙视马化腾
强烈鄙视李彦宏
参考地址: https://segmentfault.com/a/1190000009871504
重点在这
开始系统的学习node+mongdb+vue.原来想啥都自己写.现在做法是,能copy的直接ctrl+c/v 了! 感觉学习应该这么个步骤
- 快速体验: 先跟着步骤快速搭建个vue项目体验下!
- 列个大纲:
- 体验知识点: 这个有时间的话可以做,我哪有空慢慢学!
- 写个小项目: 虽然难点,可这块啊,还是快餐方式学习吧,写个小项目把知识点融入进来看!
这篇文章是第一个步骤! 建立第一个vue项目!
如何运行一个vue项目?
首先,列出来我们需要的东西:
1. node.js环境(npm包管理器)
2. vue-cli 脚手架构建工具
3. cnpm npm的淘宝镜像
安装node.js
从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。
安装完成之后,打开命令行工具,输入
node -v
如下图,如果出现相应的版本号,则说明安装成功。
npm包管理器,是集成在node中的,所以,直接输入
npm -v
就会如下图所示,显示出npm的版本信息。npm内置的相关命令可以帮我们下载项目相关的依赖!!! 大坑:现在各种前端框架都一大堆依赖,而且都是国外资源地址!
安装cnpm
在命令行中输入
npm install -g cnpm --registry=http://registry.npm.taobao.org
然后等待,安装完成如下图。
完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网
安装vue-cli 脚手架构建工具
在命令行中运行命令
cnpm install -g vue-cli
,然后等待安装完成。(注意,这里使用cnpm来替代npm,不然速度超级慢,会导致卡在那)
通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。
用vue-cli构建项目
要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。在这里,我选择桌面来存放新建的项目,则我们需要先把目录cd到桌面,如下图。
在桌面目录下,在命令行中运行命令
vue init webpack firstVue
。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在桌面生成该文件夹),如下图。
运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。
打开firstVue文件夹,项目文件如下所示。
这就是整个项目的目录结构,其中,我们主要在src目录中做修改。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装,如下图。
安装项目所需的依赖
要安装依赖包,首先cd到项目文件夹(firstVue文件夹),然后运行命令
cnpm install
等待安装。
安装完成之后,会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。
安装完依赖包之后,就可以运行整个项目了。
运行项目
在项目目录中,运行命令
npm run dev
会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
这里简单介绍下 ** npm run dev ** 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。
如果看到这个页面,说明项目运行成功了。
我就是按照上面参考地址来的! 结果初始化项目下载依赖的时候卡主了! 坑货~~~能考点谱不! !
千万别手快,直接点回车啊!!
不能用默认的npm下载项目依赖!!
卡死你!
``
选No, 建完项目再自己下载依赖! 咱们用 cnpm 下载!
这就快多了吧
命令总结
1. node -v
2. npm -v
3. npm install -g cnpm --registry=http://registry.npm.taobao.org
4. cnpm install -g vue-cli
5. vue init webpack 项目名 **千万别直接安装项目依赖!!!**
6. cnpm install
7. npm run dev
(vue01)vue环境搭建的更多相关文章
- vue环境搭建与创建第一个vuejs文件
我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...
- 55.Vue环境搭建
Vue环境搭建 在搭建过程中出现的错误解决办法 https://www.cnblogs.com/lovebing/p/9488198.html cross-env使用笔记 cross- ...
- Vue环境搭建及第一个helloWorld
Vue环境搭建及第一个helloWorld 一.环境搭建 1.node.js环境安装配置 https://www.cnblogs.com/liuqiyun/p/8133904.html 或者 htt ...
- 前端(二十三)—— Vue环境搭建
目录 一.Vue环境搭建 一.Vue环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\n ...
- Vue环境搭建、创建与启动、案例
vue环境搭建 """ 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 安装cnpm npm install - ...
- VUE环境搭建、创建项目、vue调试工具
环境搭建 第一步 安装node.js 打开下载链接: https://nodejs.org/en/download/ 这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...
- vue 环境搭建笔记
环境 开发工具:VS Code vue版本: 2.x 准备 使用 npm 包管理器进行安装,也可以使用 yarn 包管理器. 可以使用淘宝的 npm 镜像,国内速度更快. 使用方式: $ npm in ...
- windows vue环境搭建
windows环境搭建Vue开发环境 一.安装node.js(https://nodejs.org/en/) 下载完毕后,可以安装node,建议不要安装在系统盘(如C:). 二.设置nodejs pr ...
- Vue环境搭建和项目创建
目录 vue项目 环境搭建 项目创建 vue项目 环境搭建 node node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城 ...
随机推荐
- 运lucky
运 [问题背景] zhx 和妹子们玩数数游戏. [问题描述] 仅包含 4 或7 的数被称为幸运数. 一个序列的子序列被定义为从序列中删去若干个数, 剩下的数组成的新序列. 两个子序列被定义为不同的当且 ...
- [luoguP1090][Noip2004]合并果子
合并果子 首先来看一下题目: (OI2004合并果子) [题目描述] 果园里,多多已经将所有的果子打了下来,而且按果子的 ...
- sql树形查询
sql: 使用Common As:递归公用表 https://docs.microsoft.com/en-us/sql/t-sql/queries/with-common-table-expressi ...
- 为什么需要Vlan ? Vlan实现原理 ? 不同Vlan的通信 ?
好文章!!良心推荐!!! 原文链接 https://blog.csdn.net/cwm_meng_home/article/details/49762807
- Aspose.cell C# 操作excel(通过批注信息给单元格赋值、批注信息获取公式得出结果并转PNG)
if (fileName == "") return ""; var CurrentRow = 0; Workbook work = new Workbook( ...
- C++新闻检索类
研究长字符串快速全文检索技术,实现某电力公司新闻中心新闻稿件全文检索统计系统. 1. 设计实现适合新闻稿件的基础类库 2. 新闻稿件全文检索功能实现 3. 新闻稿件按照关键字统计查询 代码如下 P ...
- C++继承和派生练习(一)--关于从people(人员)类派生出student(学生)类等
. 从people(人员)类派生出student(学生)类 添加属性:班号char classNO[]:从people类派生出teacher(教师)类, 添加属性:职务char principalsh ...
- chromium之non_thread_safe
先看看介绍 // A helper class used to help verify that methods of a class are // called from the same thre ...
- ABAP术语-Business Connector
Business Connector 原文:http://www.cnblogs.com/qiangsheng/archive/2007/12/27/1016379.html XML-based st ...
- Java中事务总结详解(精华)
1.什么是JAVA事务? 通常的观念认为,事务仅与数据库相关. 事务必须服从ISO/IEC所制定的ACID原则.ACID是原子性(atomicity).一致性(consistency).隔离性 (is ...