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. notepad++一键运行python

    打开notepad++,找到菜单栏的run菜单.   子菜单选中run   弹出的小窗口中,输入cmd /k python "$(FULL_CURRENT_PATH)" & ...

  2. Java的一个关于“星球”的枚举

    public enum Planet { /** * 水星 */ MERCURY(3.302e+23, 2.439e6), /** * 金星 */ VENUS(4.869e+24, 6.052e6), ...

  3. spring mvc简单的demo(注解版)

    tomcat配置文件:web.xml <?xml version="1.0" encoding="UTF-8"? > <web-app ver ...

  4. 浅谈Spring的PropertyPlaceholderConfigurer

    大型项目中,我们往往会对我们的系统的配置信息进行统一管理,一般做法是将配置信息配置与一个cfg.properties的文件中,然后在我们系统初始化的时候,系统自动读取cfg.properties配置文 ...

  5. GDALBuildVRT异构波段的支持

    目录 简述 修改源码 1.修改DatasetProperty结构体 2.修改VRTBuilder::AnalyseRaster函数 3.修改VRTBuilder::CreateVRTNonSepara ...

  6. Ubuntu x86-64汇编(6)

    寻址方式 Addressing Modes 地址和值 Addresses vs Values 在64bit架构中, 地址是64bit. 访问内存内容的唯一方式就是通过方括号, 不加方括号读取的只是地址 ...

  7. List集合去重的一些方法(常规遍历、Set去重、java8 stream去重、重写equals和hashCode方法)

    1. 常规元素去重 碰到List去重的问题,除了遍历去重,我们常常想到利用Set集合不允许重复元素的特点,通过List和Set互转,来去掉重复元素. // 遍历后判断赋给另一个list集合,保持原来顺 ...

  8. ios中键盘处理(二)

    设置UIscrollview的背景代码 - (UIImage *) ImageWithColor: (UIColor *) color frame:(CGRect)aFrame { UIGraphic ...

  9. iOS获取ipa素材、提取ipa资源图片文件

    当我们看到一款优秀的App时,我们可能对它的一些素材比较感兴趣,或者我们也想仿写一款类似app,那么怎么能获取到它的素材资源文件呢? 下面我以ofo举例: 1.打开iTunes,搜索ofo关键字,选择 ...

  10. MATLAB 的条件分支语句

    MATLAB 的条件分支语句: 1)if...end  2)if...else...end  3) if...elseif...elseif...else...end  a=; fprintf('\n ...