1、必须安装node环境

2、安装vue-client脚手架,在命令提示符中运行npm install -g vue-cli

3、创建项目

vue init 模板名 项目名

例如:vue init webpack my_vue_app

4、运行项目

在命令提示符中进入项目目录

执行npm install    安装依赖(node和webpack依赖包)

执行npm run dev 启动项目

5、启动项目步骤

6、项目目录结构

6.1、package.json :依赖包、常用命令缩写

6.2、config -> index.js : 端口号配置

6.3、src : main.js工程入口文件(app.vue:主要组件)、代码文件

7、vue调用流程

index.html -> main.js -> app.vue -> hello.vue或者其它组件

vue-client脚手架使用的更多相关文章

  1. 简单vue项目脚手架(vue+webpack2.0+vuex+vue-router)

    github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...

  2. vue.cli脚手架初次使用图文教程

    vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...

  3. 从0开始搭建vue+webpack脚手架(四)

    之前1-3部分是webpack最基本的配置, 接下来会把项目结构和配置文件重新设计,可以扩充更多的功能模块. 一.重构webpack的配置项 1. 新建目录build,存放webpack不同的配置文件 ...

  4. 从0开始搭建vue+webpack脚手架(三)

    在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dis ...

  5. 从0开始搭建vue+webpack脚手架(二)

    接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...

  6. Vue 去脚手架

    上回模仿了一个nw,按照原理说,简单. 今天说Vue,脚手架是个好东西,做项目都给你配置好,不过对于我这种只想做一个界面的人来说,有点儿太大了,用不上. 如果说,不用脚手架要面临哪些问题呢. 1. 组 ...

  7. 分享一个vue项目“脚手架”项目的实现步骤

    搭建缘由 源于公司每次新启动一个由多人协同开发的项目都由负责人初始化项目之后,每个人再去从私服pull一下项目才开始开发.但是每次初始化工程都是一步步的造轮子,一个个依赖去安装,新建一个个不同功能的文 ...

  8. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  9. 简单vue项目脚手架

    简单vue项目脚手架 github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-ro ...

  10. VUE (vue-cli)脚手架项目说明

    1. 概述 1.1 说明 使用vue-cli快速创建的vue项目目录如下: build  -- webpack相关配置以及服务启动文件,配置多依赖于下边的config文件夹中内容 config -- ...

随机推荐

  1. https调试

    我们知道https通信在开始时会发送一个METHOD为CONNECT的请求,让服务器将证书以及相关的信息返回给浏览器,在没有得到这些信息之前,浏览器是不会信任服务器发来的任何数据的.So现在我们要让F ...

  2. HTTPS与HTTP协议区别

    1.主要区别 (1)超文本传输协议HTTP,HTTP下加入SSL层(位于传输层)的安全协议. (2)HTTP端口为80,HTTPS端口是443. 2.HTTPS通信过程 https 通信传输过程:

  3. sqrtx-开平方

    Implementint sqrt(int x). Compute and return the square root of x. 逐次逼近 class Solution { public: int ...

  4. JAVA & Android 等待线程池内任务全部完成后退出

    void shutdownAndAwaitTermination(ExecutorService pool) { pool.shutdown(); // Disable new tasks from ...

  5. dubbo应用架构演进路线图

    1.单应用单服务器: 2.单应用拆分成多个应用并部署到多个服务器: 3.单应用拆分成多个应用并实现分布式部署: 4.流动计算框架(用于提高机器利用率的资源调度和治理中心).

  6. Atitit.Guibutton与面板---项目规模的评估----文件数统计,结构,代码行数,每类型文件行数.

    Atitit.Guibutton与面板---项目规模的评估----文件数统计,结构,代码行数,每类型文件行数. 1. Kpi:::  代码行数(凝视行数,空白的行数), 方法数,class数 1 2. ...

  7. django之创建第6-1个项目-自定义过滤器

    1.在站点blog目录下创建templatetags文件夹 2.templatetags目录下需要作为一个包来处理和调用其中的内容,需要有一个__init__.py文件 3.在templatetags ...

  8. 比较JSF、Spring MVC、Stripes、Struts 2、Tapestry、Wicket

    2009-06-23 Java Web层框架--JSF.Spring MVC.Stripes.Struts 2.Tapestry和Wicket他们各自的优点和缺点: JSF 优点: ◆Java EE标 ...

  9. spring 自动装配 default-autowire="byName/byType"

    <PRE class=html name="code">spring 自动装配 default-autowire="byName/byType"   ...

  10. [抄]使用网页进行展示而非PPT

    会议.演讲离不开幻灯片,它可以有效地辅助演讲者进行表达.目前一些流行的工具,比如Windows平台上的PowerPoint.Mac平台上的Keynote等工具,使得幻灯片的制作变得简单.但是这些幻灯片 ...