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. HDFS之FileStatus

    任何文件系统的一个重要特性都是提供其目录结构浏览和检索它所存文件和目录相关信息的功能.FileStatus对象封装了文件系统中文件和目录的元数据,包括文件的长度.块大小.备份数.修改时间.所有者以及权 ...

  2. MySQL快速建立测试表

    1:只要已经存在表结构的 第一种方式: CREATE TABLE T1 SELECT * FROM mysql.user ; 第二种方式: CREATE TABLE T2 LIKE mysql.use ...

  3. 取自ACE中的bit操作宏(转)

    # define ACE_BIT_ENABLED(WORD, BIT) (((WORD) & (BIT)) != ) # define ACE_BIT_DISABLED(WORD, BIT) ...

  4. cocos2d-js 3.0 RC0 监听返回键、菜单键、进入后台(home键)、恢复显示等事件

    cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD, onKeyReleased: function(keyCode, eve ...

  5. oracle 批量删除表数据的4种方式

      1.情景展示 情景一: 删除PRIMARY_INDEX_TEST表中,MINDEX_ID字段为空的数据 情景二: 删除VIRTUAL_CARD_TEST表中的脏数据 2.解决方案 情景一的解决方案 ...

  6. 〖Linux〗Kubuntu14.04 平滑字体的设置

    有没有感觉终端的字体锯齿感觉非常强? 经过搜索后发现可以平滑字体显示得更漂亮一点: System Settings > Application Appearance > Fonts I e ...

  7. 〖Linux〗Ubuntu13.10搭建文件共享Samba服务器

    1. 安装 $ sudo apt-get install samba 2. 配置smb用户密码 # cat /etc/passwd | mksmbpasswd > /etc/samba/smbp ...

  8. 总结一下关于mysql 5.6 新特性

    一直断断续续的看一些mysql特性,今天总结一下,以下是列表,网址 http://mariadb.org/ (也是类似的特性), http://mysql.com/ 最近在看关于mysql新特性的一些 ...

  9. ipsec协议(转)

    from:http://lulu1101.blog.51cto.com/4455468/816875 ipsec协议 2012-03-25 23:40:28 标签:休闲 ipsec协议 职场 IPSe ...

  10. nginx 中文和英文资料

    http://www.nginx.cn/doc/ http://manual.51yip.com/nginx/ http://tool.oschina.net/apidocs/apidoc?api=n ...