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. mysql查看执行sql语句的记录日志

    开启日志模式 -- 1.设置 -- SET GLOBAL log_output = 'TABLE';SET GLOBAL general_log = 'ON';  //日志开启 -- SET GLOB ...

  2. Java 图形化界面设计(GUI)实战练习(代码)

    关于Java图形化界面设计,基础知识网上可搜,下面简单介绍一下重点概念,然后就由浅入深代码实例. 程序是为了方便用户使用的,Java引入图形化界面编程. 1.JFrame 是容器类 2.AWT 是抽象 ...

  3. python之while循环/格式化输出/运算符/初始编码/成员变量

    一.主要内容:1.while 循环 (难点)while 条件: 循环体 break: 直接跳出循环continue:停止当前本次循环,继续执行下一次循环.不会中断循环能让循环退出:(1)break ( ...

  4. ionic3打包不能prod的问题

    在最近的项目中,我ionic3采用了懒加载,来提高性能.但是当我普通打包的时候,正常成功了,但是加上--prod的时候,就报错了. 报错如下: 大概意思就是page是声明的一部分,然后请在更高级声明之 ...

  5. numpy之random学习

    在机器学习中参数初始化需要进行随机生成,同时样本也需要随机生成,或者遵从一定规则随机生成,所以对随机生成的使用显得格外重要. 有的是生成随机数,有的是随机序列,有点是从随机序列中选择元素等等. 简单的 ...

  6. 在Centos下面FTP映射方案

    前两天公司要在一台Centos的机子上,把一些文件定时备份到另外一台ftp服务器上, 在Linux系统中,mount是不支持直接挂在"ftp://192.168.1.1/backup&quo ...

  7. SD从零开始62-63,不完全日志,业务伙伴及业务伙伴确定

    [原创] SD从零开始62 不完全日志 不完全日志Incompletion log 一个不完全日志是销售凭证中对你公司重要的而还没有在系统中输入的所有数据的清单: 你可以在配置中为不完全日志定义这些数 ...

  8. Android 开创java世界(JNI Invocation API)

    在Android的世界中,由名称为app_process的C++本地应用程序(路径为:framework/base/cmds/app_process/app_main.cpp)调用JNI Invoca ...

  9. SG Input 软件安全分析之逆向分析

    前言 通过本文介绍怎么对一个 windows 程序进行安全分析.分析的软件版本为 2018-10-9 , 所有相关文件的链接 链接:https://pan.baidu.com/s/1l6BuuL-HP ...

  10. 关注的Elasticsearch大牛博客

    1.http://wangnan.tech/ 2.https://elasticsearch.cn/people/wood 3.https://www.jianshu.com/u/244399b1d7 ...