初识Vue 了解所需配置及意义

作用:可以快速创建vue项目结构,而不需要我们一点点的去创建/管理项目所需要的各种文件夹/文件

1.安装脚手架

1.安装Vue-cli
前提条件：你必须安装了nodejs,并且版本在8.9以上

打开你的CMD ，输入 node -v 查看你的版本

node -v

①开始安装
打开cmd，打开dos窗口输入

npm install -g @vue/cli

or

yarn global add @vue/cli

②检查vue是否安装成功
输入：vue --version 或者 vue -V
③ 如果仍然要使用vue-cli 2版本的指令 需要安装一个桥接工具

npm install -g @vue/cli-init

④选择你要创建项目的地址
地址自定
⑤进入你创建好的工程的目录地址
举例：D:\workspace\exam\webCode

执行vue init webpack-simple 项目名称
使用脚手架工具初始化你的项目
webpack-simple是一种工程模板

vue init webpack-simple helloVue

1）选项设置工程工程，并且生成vue的脚手架

2）进入已经vue-cli 已经创建好的工程目录中

执行指令：

npm install

⑦依赖安装完成后，启动我们的脚手架

npm run dev

2.vue项目结构介绍

• node_modules 项目依赖包
• src 项目核心文件(项目核心代码都放在这个文件夹下)!!!
  • assets 静态资源(样式类文件,如css、less、sass以及外部的js文件)
  • App.vue 根组件,所有页面都是在App.vue下进行切换的
    • 也可以理解为所有的路由也是App.vue的子组件
  • main.js 入口文件:主要作用是初始化vue实例并使用需要的插件。
• .babelrc babel配置参数
• .editorconfig 代码格式
• .gitignore git忽略文件
• index.html 项目的首页
• package-lock.json
• package.json
• README.md 项目说明
• webpack.config.js webpack配置文件

---

3.Vue项目案例报错

. / node_ modules/bootstrap/ dist/ fonts/ glyphicons- halflings - regular.ttf错误

需要在webpack配置文件中引入

{
    test: /\.(ttf|woff2|woff|eot)$/,
        loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
}

---

Error in render: "TypeError: Cannot read property ‘matched’ of undefined"错误

Cannot read property 'matched' of undefined意味着vue-router的某关键字没有被引擎获取到，导致报错。
经过问题检索，我发现问题出在main.js中。我在vue实例中，使用对象属性简写形式加入了自命名的路由属性，但vue需要识别固定属性名router以加载vue-router。
所以，如果引入路由组件时，使用自定义名称，在vue实例中声明时，应以键值对形式引入，如下

new Vue({
  el: '#app',
  router: myRouter,
  components: { App },
  template: '<App/>'
})