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. XAMPP phpmyadmin MYSQL的配置

    1\xampp phpmyadmin的配置 1.打开“路径/phpmyadmin/libraries/config.default.php”,查找相关项并修改为以下内容: $cfg['PmaAbsol ...

  2. Spring学习笔记二:注入方式

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6774608.html  我们说,IOC的实现方式是依赖注入,也就是把被依赖对象赋值到依赖对象的成员属性.怎么做 ...

  3. Android M 动态权限获取

    新的权限获取方式除了要求像之前版本号一样在AndroidManifest文件里静态申请之外,应用还需依据须要请求权限,方式採用向用户显示一个请求权限的对话框. 这些被动态申请的权限能够在系统设置中被手 ...

  4. linux C++ 莫名奇异的段错误(segmentation fault),无法调用其他函数

    进来在linux下开发C++项目,遇到了非常奇怪的bug. 项目须要多线程实现,在写好代码后,每当执行到线程函数内部,当内部调用其他函数如printf.fopen等时就会提示段错误(segmentat ...

  5. 理解linux cpu load - 什么时候应该担心了

    译文原文: http://blog.scoutapp.com/articles/2009/07/31/understanding-load-averages 你可能已经很熟悉linux的平均load. ...

  6. redis实现简单的分布式锁

    在分布式系统中多个请求并发对少数资源进行争抢,例如10个人同时秒杀一件商品,如果不用分布式的锁进行处理(当然还有其它的处理方案),则很容易出现多个人抢到一个商品(超卖)的情况,用redis可以比较容易 ...

  7. checkbox 多选框 :jquery之全选、全不选、反选

    javascriptjqueryselectAll [html] view plaincopy   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  8. Android 本地播放器

    发布时间:2018-09-06   技术:Glide+pinyin4j+SwipeDelMenuLayout   概述 这是一款Android 端的本地音乐播放器,界面风格有模仿网易云音乐.bilib ...

  9. 解决PHP Fatal error mysql_connect() mysql_query()的问题

    单独安装Apache.PHP.Mysql在进行开发调试的时候经常会遇到各种问题,好多人说比appserv或者xampp集成安装包麻烦,其实不然,单独配置可以更深入的了解每个部件分别是怎么运行的,深入理 ...

  10. spring下Junit_jdbc回滚demo

    配置测试类 添加如下内容在class前,用于配置applicationContext.xml文件的位置. @RunWith(SpringJUnit4ClassRunner.class) @Contex ...