项目搭建说明

项目说明:

######新建项目

(如果是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).

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容