vue-cli 2.x 使用笔记(一)

1.vue-cli安装和初始化项目:

去nodejs官网选择安装node.js
node -v  查看node是否安装成功
npm -v   查看包管理工具npm是否安装成功

全局安装vue-cli
npm install --global vue-cli

创建一个基于webpack模板的新项目
vue init webpack '项目文件夹名称'
cd '项目文件夹'
npm install
npm run dev

2.vue-cli项目文件夹结构和文件介绍:

    package.json 依赖文件,依赖包版本记录
    package-lock.json package版本
    index.html 首页模板
    .eslintrc.js 代码规范
    .eslintignore 代码规范忽略
    .editorconfig 配置编辑器语法
    .babelrc 语法解析器
    static目录 静态资源
    src目录 源代码

• main.js 项目入口文件
• App.vue 原始根组件
• router目录 路由
• components目录 小组件
• assets目录 静态资源文件

    node_modules目录 依赖包
    config目录 配置文件

• index.js 基础配置信息
• prod.env.js 线上配置信息
• dev.env.js 开发配置信息

    build目录 打包配置

3.vue单文件组件和路由

main.js 定义了一个Vue根实例 挂载到 index.html app的div元素
main.js 中components中App指的是App.vue局部组件，这是ES6语法，当键和值一致时，可以省略写成App
main.js 模板中直接渲染了这个App局部组件
main.js router 路由配置，路由就是根据网址的不同，返回不同的内容给用户

App.vue 以vue结尾的文件叫做单文件组件，App.vue是整个页面的根组件
<template></template> 中放组件的模板
<script></script> 中放组件的逻辑
<style></style> 中放组件的CSS样式
<router-view/> 显示的是当前路由地址所对应的内容

查看router中的index.js文件，当访问根路径，路由是HelloWorld。@代表src目录（可以在根目录下build/webpack.base.conf.js中的resolve配置路径的简写。注：在css中import的时候，如果使用到了简写的路径，要在前面加上符号'~'）                                   

例如：在webpack.base.conf.js中配置： 

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    'pathStyles': resolve('src/assets/styles'),  //自定义路径简写
  }
},

在js中import的时候这么写:

import 'pathStyles/reset.css'
import 'pathStyles/border.css'
import 'pathStyles/iconfont.css'

那么在css中import的时候就要这样写:

<style lang="stylus" scoped>
  @import '~pathStyles/varibles.styl'
</style>  

路由跳转:

<router-link to="path">xxx</router-link>  路由跳转