Vue初见——如何运行一个Vue项目

如何运行一个Vue项目

一开始刚接手项目内的vue.js,或者在GitHub上找到vue.js的开源项目,会发现不知如何运行这个项目。通过查阅网上教程,成功搭建好项目环境,同时对前段工程化有了朦朦胧胧的认知,因此将环境搭建过程分享给大家。

1. 环境安装

首先,列出来我们需要的东西:

node.js环境(npm包管理器)
vue-cli 脚手架构建工具
cnpm  npm的淘宝镜像

安装node.js

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

image-20200216144352886

npm包管理器直接集成在node中的,所以,不需要额外安装,输入 npm -v就会如下图所示,显示出npm的版本信息。

image-20200216144500107

由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候非常慢,甚至会失败,所有我还需要npm的国内镜像—-cnpm。

安装cnpm

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org,然后等待,安装完成。

安装webpack(可选)

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

npm install webpack -g

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

在命令行中运行命令 cnpm install -g vue-cli ,然后等待安装完成。(这里使用cnpm来替代npm,以加快速度)

2. 运行项目

从项目的根目录打开cmd

image-20200216145451354

image-20200216145519142

进入项目之后安装依赖

npm install安装项目依赖

安装完成之后项目里面多了一个文件夹

image-20200216145948586

然后运行npm run dev

image-20200216151319536

复制地址到浏览器就可以打开了。


  上一篇
神经网络——自编码器(Autoencoder) 神经网络——自编码器(Autoencoder)
自编码器(Autoencoder,AE),是一种利用反向传播算法使得输出值等于输入值的神经网络,它先将输入压缩成潜在空间表征,然后通过这种表征来重构输出。是一种简单却非常奇妙的神经网络结构。
2019-04-16
下一篇 
一道编程题——两个栈实现队列 一道编程题——两个栈实现队列
编程题:用两个栈来实现一个队列,完成队列的Push和Pop操作。 队列中的元素为int类型。栈的特点是先进后出,队列为先进先出。
2019-03-10
   目录