一、项目创建 (Ubuntu17.04系统)
前提是安装了vue.js的环境,已经全局按装了:
$ npm install -g cnpm --registry=http://registry.npm.taobao.org (安装cnpm ,检查下网址,防止拼写错了。。。)
$ cnnpm install -g vue-cli (此步骤安装vue-cli工具,$vue 会出现命令,说明安装成功)
现在开始创建项目:
$ vue init webpack sell (基于webpack打包模式的项目初始化,项目名称: sell)
$ cd sell (进入项目目录下)
一键下载项目依赖项:
$ sudo cnpm install (或者 $ sudo npm install)----------项目目录下会多出node_modules文件夹,存放项目依赖的文件
现在可以运行空项目了;
$ npm run dev (这个dev是项目下的package.json文件里面已经写好的快捷运行的名字dev)
项目目录:
build和config:webpack打包后的文件所在位置。其中webpack.dev.conf.js是主要修改的文件,build中配置了webpack的基本配置、开发环境配置、生产环境配置等。
node_modules:项目依赖的包,包括npm install ***进来的都在这。
resource:存放只用资源,包括图片等
src:源,存放自己写的文件(组件)和自动生成的App.vue和main.js及router文件夹
(自己新建的common存放常用的样式、字体、功能等,components放自己写的组件,每个组件单独文件夹,因为组件里面会用到图片等资源的话最好就近查找,eg: Header、Good 、ratings 等组件,引用时用相对路径引入,再注册即可(components:{ 引入的组件名}))
static放一些静态文件,下面的就是配置项:data.json是自己导入的数据,放的是项目用到的json数据
,
1.main.js是我们的入口文件,主要作用是初始化vue实例并使用需要的插件。
/* eslint-disable no-new */ 是ES6语法,忽略用Vue实例化的时候赋值给值(变量),所以要单独给配一条规则,给new Vue这行代码上面加这个注释,把这行代码规则的校验跳过。
import Vue from 'vue';
import App from './App';
import router from './router';
import VueResource from '../node_modules/vue-resource';
import './common/stylus/base.styl'; // 样式引入stylus样式写法
import 'font-awesome/css/font-awesome.css'; // 引入图标字体font-awesome,后面可以在组建里面直接用
2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以router标示为App.vue的子组件。
在这里设置路由:在data里面引入数据源: seller
seller是在webpack.dev.conf.js里面自定义的变量,用来向子组件传递数据。seller引入的是data.json里面的数据(12-18行):
此时访问localhost:8080/api/goods可以看到goods相关的json数据。
3.index.html是入口文件,不引入文件,编译时会自动插入文件
PS: data.json数据 eg: seller.name, seller.support[0].type
总结于 2017.12.13 夏天的wind-加油!