vue - vue-cli 创建基础（一）

版权声明：尊重原创！ https://blog.csdn.net/weixin_42675488/article/details/88364713

项目搭建环境（已经有了最新的node和npm）步骤：
1.0 、 npm install -g vue-cli	先构建好项目
2.0、 vue init webpack myProject	初始化项目，webpack会自动打包好并压缩项目
3.0、 init 的过程中会问你给项目定义一些描述，版本之类的信息	一直输入 y 即可
4.0、 最后，npm run dev 是开始执行我们的项目了	会生成一个 http://localhost:8080/#/ 的链接
4.1、 这里需要在package.json 中的scripts设置打开的浏览器	“dev”: “–open chrome” 即可
	最后完整目录

1、[WDS] Warnings while compiling. vue项目运行控制台（浏览器）输出太多警告信息：

步骤：
1.0、找到 build / webpack.base.conf.js 文件	找到 第43行
2.0、 // …(config.dev.useEslint ? [createLintingRule()] : []),	将其注释掉
3.0、保存，关闭服务重新 npm run dev 重启服务

2、在</ template> 中尝试插入第二个元素时就会报这个错：

提示报错： Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

原因：vue模板只能有一个根对象；

即：想要出现正常的效果，就只能用一个 div 来或是别的标签来包裹全部的元素;

---

Vue的核心是组件和路由，而 API 可以很好的去理解；

/* 分析 main.js：*/
import Vue from 'vue'
import App from './App'   // 引要用到的组件
import router from './router'   // 路由配置

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',   // 声明，将 '所有' 视图放在id值为 app 这个demo元素中；
  router,  // 并且使用路由，将页面串联起来
  template: '<App></App>',  // 而这个文件将以<app>标签的形式包裹起来，并使用
  components: {      // components 则表明要引入的文件，即 App.vue 这个文件
    App
  }
})

xxx.vue 组件，可以分为结构、脚本、样式三个部分组成；

<template>
</template>

<script>
   // import  from ''
    export default {
        name: '',
        components: {
        },
        methods:{
        }
    };
</script>

/* package.json需要安装 npm install less-loader less -D */
<style lang='less' rel='stylesheet' scoped>
</style>

路由(router目录下的index.js文件)，http:// localhost:8080/#/ 锚点路由即我们要在浏览器打开的地址；

import引入相组件，routes进行配置

import Vue from 'vue'
import Router from 'vue-router'
// 引用页面模板->供路由使用
import index from '../pages/index.vue'            //首页
import pageQuiButton from '../pages/pageQuiButton.vue'

// 引入子路由
import Blog from '../pages/page.vue'
// 引入子路由页面
import page1 from '../pages/page1.vue'
import page2 from '../pages/page2.vue'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    },
    {
      path: '/btn',
      name: 'btn',
      component: pageQuiButton
    },
    {
      path: '/blog',
      name: 'blog',
      component: Blog,
      children: [
        {
          path: 'info',
          component: page2
        }
      ]
    }
  ]
})