项目搭建说明

项目说明:

######新建项目

(如果是git中已经存在的项目,直接拉取,本地要有node跟webpack,然后cmd窗口中切换到项目目录,输入npm install或者cnpm install回车安装项目依赖

安装完成后,再输入npm run dev启动项目,启动完成后项目自动在浏览器中打开,表示项目启动成功,默认端口8080:)

#项目安装

node安装

http://www.cnblogs.com/starof/p/5194716.html

https://nodejs.org/en/download/

安装好后

npm install webpack -g

http://blog.csdn.net/ansu2009/article/details/53261410

npm install -g vue-cli

首先,我们在终端中把当前目录定位到你准备存放项目的地方。如准备放在E:\vue这个目录下面,那么先通过cmd命令进入这个目录,命令如下:

cd vue

进入到目录之后,我们按照下面的代码输入,新建一个自己的vue项目demo01

vue init webpack demo01

cd demo01

npm install

npm run dev

#项目目录结构介绍

index.html首页入口文件,你可以添加一些meta信息或同统计代码。

static静态资源目录,如图片、字体等。目前项目中放置的是js公共方法(comm文件夹中comm.js)、

PamarsConst.js请求公共参数,以及一些插件(plugins)

src这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

assets:放置一些图片,如logo等。

components:目录里面放置组件文件。

* page:放置所涉及的页面跳转vue文件,之后项目中所增加的新页面都放在这里

* router:路由配置文件。每增加一个新页面就添加一项路由配置

store:数据管理文件,暂时不用

App.vue:项目入口文件。

main.js:项目的核心文件。

config配置目录,包括端口号等。我们初学可以使用默认的。

dist最终发布的代码存放位置。  项目开发完后,cmd调出命令面板,输入npm run build后自动生成的文件

#项目开发中需要注意的事项

1.所有页面中都需要引入的js或css文件,可以在index.html中引入,常规写法,其他的只需要在个别页面中引入的,vue文件中import引入

2.页面引入的图片或者js、css文件路径要写相对路径

3.需要添加路由跳转的地方添加标签

4.路由配置:首先在router文件夹下的index文件内引入改模板,例如import userManage from '../page/user-manage'

userManage名称要跟后台存的名称一致

然后在新增页面在/home下的children里面配置,Login路由是登录页路由,path: '/'表示项目启动后的默认显示页面

5.单个.vue文件中,script标签内写相应方法,style标签内可以写页面样式

6.如果用webstorm开发,在WebStorm中添加Vue.js单文件组件的高亮及语法支持,参考http://blog.csdn.net/Dcatfly/article/details/53123318

#项目启动

以上选项都配置好后,每次开发前都需要先启动项目,cmd命令面板中切换到项目所在目录adminsys输入命令行npm run dev然后

按回车键,项目启动后自动在浏览器中打开当前项目,默认端口http://localhost:8080/#/home

#项目断点调试

vue-cli采用的是webpack进行构建的,所以如果要进行断点调试的话,

请设置devtool为source-map。具体做法是:到/build目录下的webpack.dev.config.js搜索devtool,将其设置为source-map

完成配置后,跑node服务npm run dev,然后就可以在chrome浏览器中进入开发者模式。搜索具体的vue组件进行断点调试。

---------------------------------------------------------------------------------------------------------

# adminsys

> A Vue.js project

## Build Setup

``` bash

# install dependencies

npm install

# serve with hot reload at localhost:8080

npm run dev

# build for production with minification

npm run build

# build for production and view the bundle analyzer report

npm run build --report

# run unit tests

npm run unit

# run e2e tests

npm run e2e

# run all tests

npm test

```

For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,646评论 4 366
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,979评论 1 301
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,391评论 0 250
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,356评论 0 215
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,740评论 3 293
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,836评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,022评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,764评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,487评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,728评论 2 252
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,200评论 1 263
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,548评论 3 260
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,217评论 3 241
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,134评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,921评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,919评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,766评论 2 274

推荐阅读更多精彩内容