1.$ node -v (检测node版本,node版本需要在 V4 以上)

2.全局安装vue $ npm install -g vue

3.安装脚手架 $ npm install -g vue-cli

4.运行 vue 命令,看是否已安装完毕 $ vue / $ vue list (查看可安装的模板)

5.安装模板 $ vue init webpack(模板) sell(项目名称)

6.? Project name sell

 ? Project description sell app

 ? Author crazyCode <1178770858@qq.com>

 ? Use ESLint to lint your code? Yes

 ? Pick an ESLint preset Standard

 ? Setup unit tests with Karma + Mocha? No

 ? Setup e2e tests with Nightwatch? No

7.$ cd sell (进入项目目录)

8.$ ll -a (查看目录结构)

9.$ npm install (安装模块下代码的依赖)

10.$ npm run dev (运行项目)

11.项目准备 A.新建resource文件夹,将图片文件放在 resource 之中

      B.通过IcoMoon 将svg 图片制作成矢量图标

12. 设计项目目录A.所以的代码文件都放在 src 文件夹中 ,src 下 一般有三个子目录 assets 、components(在其中自建文件夹,存放组件,满足组件就近维护的原则) 和common(公共的模块和资源,其中有3个子目录,js,stylus,fonts)

B.图片资源文件放在 resource 文件夹之中

13.复制之前的矢量图标文件(4个)及 style.css,存放在fonts文件目录和 stylus文件目录下,将style.css 改名为 icon.styl 且内容格式同步(只需删除文件中{}和 ; 即可)

14.删除assets 和 router 目录

15.编制数据接口  build --> dev-server.js

在 dev-server 中设置 获取 调用 数据

16.安装 Google 的 jsonview 插件,格式化 json 数据

17.在static项目下,新建css文件夹,存放 reset.css ,官网:http://cssreset.com

18.配置分号(;) semi (默认eslint 是没有分号的,如果强加;号,会报错,需要到eslintrc.js 下配置)

19.设置代码缩进

20.在App.vue 上进行区块布局

注意路径 ./ 表示当前路径

import  ***  from  '***' --> 引用

export default {

  components: {

    'v-header': header

  }

} --> 注册

export 与 export default 的区别是 export default 是相对于 整个modal 导出

21.安装 stylus-loader之前,需先安装 stylus

$ npm install stylus

$ npm install stylus-loader

22.下载vue-router   $ npm install vue-router   (文档 http://router.vuejs.org/zh-cn/)

23.绑定a标签  v-link="{path:'***'}"  组件(路由外链) <router-view></router-view>

vue 项目的开发流程的更多相关文章

  1. Vue项目的开发流程

    我先安装的node.js 1.确认已安装了node.js,可在cmd中输入( node -v和npm -v),如显示出版号,说明安装成功 2.安装webpack 和webpack-cli 在全局下安装 ...

  2. 如何加快Vue项目的开发速度

    如何加快Vue项目的开发速度 本文摘自奇舞周刊,侵权删. 现如今的开发,比如内部使用的管理平台这种项目大都时间比较仓促.实际上来说,在使用了webpack + vue 这一套来开发的话已经大大了提高了 ...

  3. vue项目的开发

    vue项目的开发 我们已经通过命令行创建了一个vue项目,并且打开了这个项目.下面是这个文件的src文件夹,这个文件夹放了整个项目的核心代码. 一.vue文件的用处简介. 1.assets文件夹,用来 ...

  4. vue- Vue-Cli脚手架工具安装 -创建项目-页面开发流程-组件生命周期- -03

    目录 Vue-Cli 项目环境搭建 与 python 基础环境对比 环境搭建 创建启动 vue 项目 命令创建项目(步骤小多) 启动 vue 项目(命令行方式) 启动 vue 项目(pycharm 方 ...

  5. 加快Vue项目的开发速度

    巧用Webpack Webpack是实现我们前端项目工程化的基础,但其实她的用处远不仅仅如此,我们可以通过Webpack来帮我们做一些自动化的事情.首先我们要了解require.context()这个 ...

  6. Spring MVC——项目的开发流程

    创建项目(IDEA下) 打开IDEA,我们开始创建一个简单的Spring MVC项目,流程如下: 这里要注意一下,我们是基于Maven开发项目,当然是要配置Maven环境的,如果大家之前从来没有配置过 ...

  7. Vue项目在开发环境跨域和生成环境部署跨域问题解决

    一.在dev环境下的跨域问题解决1.项目使用的是axios请求网络,将baseUrl修改为/api (这里是使用webpack提供的代理功能将/api代理成目标接口host) axios.defaul ...

  8. vue 仿QQ 开发流程

    技术客栈: vue-cli vue2 vue-router vuex axios stylus webpack2 muse-ui 1.安装脚手架 npm install -g vue-cli 2.开始 ...

  9. 使用 typescript ,提升 vue 项目的开发体验(1)

    此文已由作者张汉锐授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言:对于我们而言,typescript 更像一个工具 官方指南 从 vue2.5 之后,vue 对 ts ...

随机推荐

  1. C++反汇编-菱形继承

    学无止尽,积土成山,积水成渊-<C++反汇编与逆向分析技术揭秘> 读书笔记.马上就要出差了,回来后接着写吧. 一.概述 菱形继承是最复杂的对象结构,菱形结构会将单一继承与多重继承进行组合. ...

  2. 图解vim常用命令

    VI 即 Visual Interface,可视化接口,VIM是VI的增强版 (improved),两张图总结vim常用命令. 图片来自 https://www.cnblogs.com/yangjig ...

  3. 理解JavaScript中BOM和DOM的关系

    JavaScript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,IE和其他的浏览器风格迥异.对象是JavaScript最重要的API,包含 ...

  4. rac 10g 10.2.0.1升级到10.2.0.5具体解释

        RAC 10.2.0.1 升级到 10.2.0.5 一. 准备: Patch 包:p8202632_10205_LINUX.zip   节点数:3个节点       RAC1    RAC2  ...

  5. makfile.am 和makefile.in 的使用

    参考 http://blog.csdn.net/vevenlcf/article/details/48134313 http://linux.chinaunix.net/techdoc/develop ...

  6. inline

    inline 大学在教科书上学习过inline函数,定义为inline函数之后,会省去函数调用的开销,直接嵌套汇编代码,取代函数调用,提高效率.工作后项目中也很少用到inline来定义函数,近几天在研 ...

  7. 【BZOJ】【1415】【NOI2005】聪聪和可可

    数学期望+记忆化搜索 论文:<浅析竞赛中一类数学期望问题的解决方法>——汤可因  中的第一题…… Orz 黄学长 我实在是太弱,这么简单都yy不出来…… 宽搜预处理有点spfa的感觉= = ...

  8. ubuntu 安装 mongodb 数据库

    第一步:下载安装包 下载版本:3.0.1 下载链接:http://www.mongodb.org/downloads 首先在linux中解压缩安装程序 通过命令操作: 解压:[root@localho ...

  9. 网页IE轻松调用VLC播放器实现监控(组件+方法大全)【转】

    公司突发奇想,要把刚买回来的网络监控机用自己内部网站在线监控. 作为网站的开发员,我接下了这个任务. 网络上有很多资料参与,但是都不全都不尽人意,最后经过多次的不同关键字的查找和测试,总算让我成功了. ...

  10. [JQuery插件系列]-强烈推荐10个非常不错的jQuery工具提示插件

    个非常酷的 jQuery 工具提示(Tooltip)插件,希望大家能喜欢. 1. Pop! 使用 Pop!可以创建简单的下拉菜单!这是一个并不引人注目的 jQuery 插件. 2. BetterTip ...