作用:可以快速创建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/>'
})