项目说明:
######新建项目
(如果是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).