vue 项目的开发流程
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 项目的开发流程的更多相关文章
- Vue项目的开发流程
我先安装的node.js 1.确认已安装了node.js,可在cmd中输入( node -v和npm -v),如显示出版号,说明安装成功 2.安装webpack 和webpack-cli 在全局下安装 ...
- 如何加快Vue项目的开发速度
如何加快Vue项目的开发速度 本文摘自奇舞周刊,侵权删. 现如今的开发,比如内部使用的管理平台这种项目大都时间比较仓促.实际上来说,在使用了webpack + vue 这一套来开发的话已经大大了提高了 ...
- vue项目的开发
vue项目的开发 我们已经通过命令行创建了一个vue项目,并且打开了这个项目.下面是这个文件的src文件夹,这个文件夹放了整个项目的核心代码. 一.vue文件的用处简介. 1.assets文件夹,用来 ...
- vue- Vue-Cli脚手架工具安装 -创建项目-页面开发流程-组件生命周期- -03
目录 Vue-Cli 项目环境搭建 与 python 基础环境对比 环境搭建 创建启动 vue 项目 命令创建项目(步骤小多) 启动 vue 项目(命令行方式) 启动 vue 项目(pycharm 方 ...
- 加快Vue项目的开发速度
巧用Webpack Webpack是实现我们前端项目工程化的基础,但其实她的用处远不仅仅如此,我们可以通过Webpack来帮我们做一些自动化的事情.首先我们要了解require.context()这个 ...
- Spring MVC——项目的开发流程
创建项目(IDEA下) 打开IDEA,我们开始创建一个简单的Spring MVC项目,流程如下: 这里要注意一下,我们是基于Maven开发项目,当然是要配置Maven环境的,如果大家之前从来没有配置过 ...
- Vue项目在开发环境跨域和生成环境部署跨域问题解决
一.在dev环境下的跨域问题解决1.项目使用的是axios请求网络,将baseUrl修改为/api (这里是使用webpack提供的代理功能将/api代理成目标接口host) axios.defaul ...
- vue 仿QQ 开发流程
技术客栈: vue-cli vue2 vue-router vuex axios stylus webpack2 muse-ui 1.安装脚手架 npm install -g vue-cli 2.开始 ...
- 使用 typescript ,提升 vue 项目的开发体验(1)
此文已由作者张汉锐授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言:对于我们而言,typescript 更像一个工具 官方指南 从 vue2.5 之后,vue 对 ts ...
随机推荐
- vue各生命周期适合做的业务逻辑
一.实际项目中使用最多的Vue生命周期大概是 created mounted updated 二.各自适合做的业务逻辑 1. created 相当于是页面刚开始加载的状态,此时不能操作实例的 ...
- 解析本内置Linux目录结构
使用声明:1.此版本采用官方原版ISO+俄罗斯HunterTik 的Debian包制作而成2.此IMG包未进行Crack,资源来源于网络,如果你下载的是Crack版,与原作者无关,请自行分辨.“就看人 ...
- 平时常用的Visual Studio操作技巧,持续更新中……
移除未使用的命名空间--方法1:右键--"组织using"--"移除未使用的using"--方法2:Shift+F10--"O"-" ...
- pytest文档21-pytest-html报告优化(nodeid中文显示[\u6350\u52a9\u6211\u4eec]问题解决)
前言 pytest-html报告中当用到参数化时候,获取用例的nodeid里面有中文时候,会显示[\u6350\u52a9\u6211\u4eec]这种编码(再次声明,这个不叫乱码,这是unicode ...
- activity之间參数传递&&获取activity返回值&&activity生命周期
Activity之间參数传递 A activity想将參数传给B activity时能够利用Intent将消息带过去 Intent intent = new Intent(this,BActivity ...
- LDAP 总结
LDAP入门 首先要先理解什么是LDAP,当时我看了很多解释,也是云里雾里,弄不清楚.在这里给大家稍微捋一捋. 首先LDAP是一种通讯协议,LDAP支持TCP/IP.协议就是标准,并且是抽象的.在这套 ...
- 数据库实例: STOREBOOK > 用户 > 编辑 用户: DBSNMP
ylbtech-Oracle:数据库实例: STOREBOOK > 用户 > 编辑 用户: DBSNMP 编辑 用户: DBSNMP 1. 一般信息返回顶部 1.1, 1.2, 2 ...
- Kmeans算法原理极其opencv实现(转帖)
原帖地址:http://blog.csdn.net/qll125596718/article/details/8243404 1.基本Kmeans算法[1] 选择K个点作为初始质心 repeat ...
- Android 时间日期Widget 开发详解
桌面Widget其实就是一个显示一些信息的工具(现在也有人开发了一些有实际操作功能的widget.例如相机widget,可以直接桌面拍照).不过总的来说,widget主要功能就是显示一些信息.我们今天 ...
- Web开发者不容错过的10段CSS代码
Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发.但仍然有一些开发者迷恋着一些CSS2代码. 本文将分享20段非常专业的CSS2/C ...