仿写饿了么app之vue 2.0版本笔记1

第一部分：
项目前奏
1.先用npm 包管理工具安装vue
npm install vue
2.安装vue脚手架工具CLI
全局安装vue-cli:
npm install --global vue-cli
3.创建一个基于webpack模板的新项目
vue init webpack seller
然后会问Project name/Project description/Author
然后接下来
? Vue build (Use arrow keys)
❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files -
render functions are required elsewhere
这是问需不需要安装编译器，直接回车就可以
? Install vue-router? (Y/n)
这是问是否安装路由，需要安装，直接回车
? Use ESLint to lint your code? (Y/n)
这是问是否需用用ESLint检查代码？直接回车
? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript)
none (configure it yourself)
这是让选择一个ESLint代码风格，直接回车，选择standard就可以
? Setup unit tests with Karma + Mocha? (Y/n)
这是问是否安装测试单元，输入n即可
? Setup e2e tests with Nightwatch? (Y/n)
还是关于测试的，输入n回车；
should we run 'npm install' for you after the project has been created?
选择use npm 直接回车就可以；
然后就是等待安装工程依赖了，等待。。。。
项目初始完成了
4.切到项目目录下
cd seller
5.安装依赖
npm install
注：npm install 较慢的话，可以使用国内淘宝的镜像来安装：npm install -g cnpm --registry=https://registry.npm.taobao.org
6.然后npm run dev就可以看到默认的demo页面了
第二部分：
整理项目目录
1，在项目根目录src目录下，建立两个文件夹，common和components文件夹；
2，common 文件夹下面建立fonts、js、stylus文件夹；
3，component文件夹是为了放各个component组件；
4，每个组件都是包括template、script、style 三个部分；
5，WebStorm里面可以建立vue文件模板，在File--Settings--Editor--File and Code Templates下面；
vue文件模板格式如下：



如果用到es6语法，则要在script中声明type="text/ecmascript-6";
如果用stylus语法，则要在style中声明lang="stylus" rel="stylesheet/stylus" type="text/stylus";
当然，如果用的是2017版的ws,vue文件格式默认已经有了，并且支持stylus语法，低版本的ws貌似不支持；
第三部分：
整理路由部分
1.在项目src目录下面的main.js中，引入VueRouter:
import VueRouter from 'vue-router';
2.然后调用：
Vue.use(VueRouter);
3.定义路由：
const routes = [
{path: '/goods', component: Goods},
{path: '/ratings', component: Ratings},
{path: '/seller', component: Seller}
];
注：Goods/Ratings/Seller这些组件都要在main.js里面引入进来；
4.创建router实例，然后传routes配置：
const router = new VueRouter({
routes //相当于routes:routes
})
5.创建和挂载根实例：
new Vue({
router,
template:'',
components:{App}
}).$mount('#app');
6.配置完路由后，要在页面上写入，即在App.vue里面：
商品
评价
商家
7.若要默认访问某个组件，则在创建router实例的下面，写上：
router.push("/goods"); //老版本的router用的是router.go();
8.创建router实例的时候，可以传入其他的一些配置：
如const router = new VueRouter({
linkActiveClass:'active'
});
这样，在点击某个链接的时候，比如点击评价，只要设置对应的active的样式就可以了。默认的是'router-link-active';