vue.js文档:https://cn.vuejs.org/v2/guide/

参考这个或者参考菜鸟教程也可以,不过还是那句话官网权威。

我这个主要是看相关的学习视频搭建的。

一、环境准备

环境准备(node.js环境):

脚手架环境:vue-cli

执行如下命令安装:

npm install vue-cli -g 或者cnpm install vue-cli -g

安装成功后在在命令行里输入vue,出现如图表示OK

二、项目初始化

vue init webpack project-name

例如:

vue init webpack blog

出现下面示意图:

Project name 可以自定义项目名

Project description 项目描述

Author 作者相关信息

VCue build 通常有三种 我选择标准的也就是第一种

Install vue-router 是否安装vue-router vue-router是vue的通信方式 我选择安装

EsLint 是否选择EsLint语法检查 我选择是

Set up unit tests 我不构建单元测试 所以选择否

其它的还有,这里就不再赘述。

初始化项目成功后,会出现如下所示:

三、运行项目

cd blog

npm run dev

出现如图,表示成功

在浏览器输入:http//localhost:8080,出现如图:

Vue.js项目脚手架构建的更多相关文章

  1. vue.js项目构建

    这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJ ...

  2. Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

    [TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

  3. vue-cli脚手架搭建Vue.js项目

    前提条件: 一.node.js 下载 https://nodejs.org/zh-cn/download/ 二.webpack 安装 npm install webpack -g   PS:-g 就是 ...

  4. Vue.js项目的开发环境搭建与运行

    写作背景:手上入一个用Vue框架写的微信公众号项目,根据公司安排,我负责项目源代码的验收工作(当然专业的工作检测会交给web开发人员,我只是想运行起来看一看). 1 开发环境安装步骤: (一)安装no ...

  5. vue.js项目安装

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

  6. vscode下面开发vue.js项目

    vscode下面开发vue.js项目   https://blog.csdn.net/linzhiqiang0316/article/details/79176651 vscode下面开发vue.js ...

  7. vue源码分析—Vue.js 源码构建

    Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下.(Rollup 中文网和英文网) 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.j ...

  8. 从零开始搭建一个vue.js的脚手架

    在谷歌工作的时候,我们要做很多界面的原型,要求快速上手,灵活运用,当时用的一些现有框架,比如angular,太笨重了——尤雨溪(Vue.js 作者) vue.js是现在一个很火的前端框架,官网描述其简 ...

  9. 建立多页面vue.js项目

    介绍 根据需求,我们希望建立一个多页面的vue.js项目,如何改造单页面vue.js项目为多页面项目?跟着我的步伐看下去吧. 1.创建单页面vue.js项目 简单的记录一下创建步骤: --安装cnpm ...

随机推荐

  1. 【常用配置】Spring框架web.xml通用配置

    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java. ...

  2. 【23】备忘录模式(Memento Pattern)

    一.引言 在上一篇博文分享了访问者模式,访问者模式的实现是把作用于某种数据结构上的操作封装到访问者中,使得操作和数据结构隔离.而今天要介绍的备忘者模式与命令模式有点相似,不同的是,命令模式保存的是发起 ...

  3. 基于mave的dubbo分别架构

    开始前,先看一下demo项目工程结构: 1.抽离接口 dubbo-api工程,根据业务抽离接口,deploy到mave nexus. public interface TestService { /* ...

  4. Debian、Ubuntu恢复误删除(或者说重装)的/var/lib/dpkg

    在使用ubuntu的使用,有可能会碰到dpkg挂掉,网上的通用解决方法,如果不管用: 1, dpkg 被中断,您必须手工运行 sudo dpkg --configure -a解决此问题 2, sudo ...

  5. webpack2利用插件clean-webpack-plugin来清除dist文件夹中重复的文件

    配置文件如下 /** * Created by oufeng on 2017/5/6. */ const webpack = require('webpack'); const path = requ ...

  6. ES6中Object.is方法比较两个值是否相等

    Object.is: let obj={a:1,b:2}; Object.is(obj,obj);//true Object.is(obj,{obj});//false Object.is({},{} ...

  7. SD从零开始65 框架协议(Outline Agreement)

    SD从零开始65 框架协议(Outline Agreement) 合同-销售凭证类型Contracts-Sales Document Types 框架协议在几乎所有的业务处理中都扮演重要的角色:客户和 ...

  8. Tsung CentOS 操作系统下搭建tsung性能测试环境_Part 2

    CentOS 操作系统下搭建tsung性能测试环境_Part 2 by:授客 QQ:1033553122 --------------------接CentOS 操作系统下搭建tsung性能测试环境_ ...

  9. 【redis专题(1)】安装与启动

    简介 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo(redis之父)写的key-value存储系统. Redis提供了一些丰富的数据 ...

  10. 【第五篇】SAP ABAP7.5x新语法之命名规约

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:SAP ABAP7.5x系列之命名规约   命名 ...