vue单页应用之创建和运行

DTeam 发布于2019-08-20 18:55 / 2939人阅读

摘要：首先要开始单页应用开发，肯定是要知道如何运行，如何创建单页，这里将一步步带你入的坑。。。

首先要开始vue单页应用开发，肯定是要知道如何运行，如何创建单页，这里将一步步带你入vue的坑。。。

1.安装node

安装node并不是叫你学习node,而是我们需要node里面npm所有才去安装，进入node官网的下载页http://nodejs.cn/download/下...，安装完毕之后在命令框中输入npm -v看下是否有安装成功

如果有显示npm的版本号说明安装成功

2. 引入淘宝镜像

这里引入淘宝镜像主要是为了能够速度快些，毕竟要访问国外的有时候会比较慢，在命令框中输入

npm install -g cnpm --registry=https://registry.npm.taobao.org

引入之后查看版本号，看是否安装成功，cnpm -v,如果有一大串东西出来说明成功

3.安装vue脚手架

在命令框中cnpm install vue-cli -g(这里一定要全局安装)，安装好之后就可以进入vue的开发了,检查脚手架是否安装成功vue -V(这里的V要大写)

4.安装webpack

在你想要的磁盘里面创建一个项目文件，然后在这个项目文件的目录下，打开命令框，输入
cnpm install webpack(这里webpack是局部安装如果要全局安装则命令为cnpm install webpack -g)

5.vue项目创建

以上四步都完成之后，在项目文件的目录下，打开命令框输入vue init webpack 【vue项目名称】

第五步之后，会在项目文件中看到

vuePro就是我们创建的vue项目开发文件，接下来都在这个文件里面进行开发vue单页应用

6.运行vue项目

在上面创建的vuePro文件目录下，打开命令提示框，输入cnpm install,运行完毕之后，继续在命令框中输入cnpm run dev接下来就可以运行项目了

注意

若eslint验证太严格需要关掉，则删掉build中webpack.base.conf.js文件的这部分即可，删掉部分如下图：

test: /.(js|vue)$/,
loader: "eslint-loader",
enforce: "pre",
include: [resolve("src"), resolve("test")],
options: {
  formatter: require("eslint-friendly-formatter")
}

云服务器 GPU云服务器单页应用单页应用cdn 单页应用程序快速搭建php运行环境之wampserver

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84869.html

vue单页应用之创建和运行

摘要：首先要开始单页应用开发，肯定是要知道如何运行，如何创建单页，这里将一步步带你入的坑。。。首先要开始vue单页应用开发，肯定是要知道如何运行，如何创建单页，这里将一步步带你入vue的坑。。。 1.安装node 安装node并不是叫你学习node,而是我们需要node里面npm所有才去安装，进入node官网的下载页http://nodejs.cn/download/下...，安装完毕之后...

Near_Li 2019-08-01 17:29 评论0 收藏0
前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿

摘要：前端每周清单第期支付宝前端构建工具发展用加快网页响应速度饿了么升级实践前端前端每周清单前端每周清单专注前端领域内容，分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿了么PWA 升级实践为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔...

liuchengxu 2019-08-20 16:23 评论0 收藏0
[使用 Weex 和 Vue 开发原生应用] 6 使用 vue-router

摘要：使用值来作路由。原生应用本身就是多页的场景，页面间状态的隔离比共享更重要一些。使用开发的是原生应用，页面栈的管理使用的也是原生的特性，没有但是有模块可以实现页面的前进和后退等操作。系列文章的目录在 ? 这里（由于我比较懒最近一段时间在忙其他事，系列文章拖了好久终于又更新了。。。）什么是 vue-router ？ vue-router 官方文档 vue-router 是针对 V...

leonardofed 2019-08-20 15:51 评论0 收藏0
使用 Vue.js 和 Flask 来构建一个单页的App

摘要：我们将创建一个简单的，它将从到返回一个随机数。我们来改变组件显示随机数在这个阶段，我们只是模仿客户端的随机数生成过程。在这个教程中，我们将讲解如何将vue.js单页应用与Flask后端进行连接。一般来说，如果你只是想通过Flask模板使用vue.js库也是没有问题的。但是，实际上是一个很明显的问题那就是，Jinja（模板引擎）也和Vue.js一样采用双大括号用于渲染，但只是一个还算...

LiuZh 2019-07-31 11:06 评论0 收藏0