人生就像一列开往坟墓的列车，路途上会有很多站，很难有人至始至终陪你走完全程，当陪你的人要下车时，即便不舍，也要心存感激，然后挥手告别。---sunnyhuang
>>1vue-cli
简洁:通过Vue.js官方提供的命令行工具，我们可以搭建出大型的单页运用。
- $ npm install --global vue-cli （全局安装vue-cli）
- $ vue init webpack my-project（创建一个基于webpack的模板项目）
- $ cd my-project （切换到相应的文件夹安装依赖）
- $ npm install
- $ npm run dev （运行dev）
这里的my-project是一个文件夹，你也可以提前建好文件夹，$ vue init webpack .，然后在当前文件夹进行安装
>>基本文件
安装后的文件
安装好vue-cli后就会有如下的主要文件夹和内容
- build文件夹
- config文件夹
- node modules 文件夹
- src 文件夹
- static 文件夹
- package.json文件
- index.html
解析文件夹
1.package.json
-
package.json 首先研究基本配置文件，这个里面包含了你的项目的基本信息和重要依赖，版本等基本信息
基本信息和依赖版本 - 通过package.json的脚本配置，知道有build文件夹下面的
dev-server.js和build.js两个不同的脚本配置，所以在启动的时候npm run dev和npm run build是不同的二个脚本。本文章研究npm run dev
2.build文件夹
build文件中配置1. webpack.base.conf.js 2. webpack.dev.conf.js
- webpack.base.conf.js
//第10行左右的入口配置相应的js依赖
module.exports={
entry:{
main: './src/main.js', // 默认的单页文件位置
j0201:"./src/morepage/j0201.js", //多页练习的配置地址
j0202:"./src/morepage/j0202.js" //多页练习的配置地址
}
.......
}
- webpack.dev.conf.js配置相应的文件。配置了相应的js，但是没有启动相应的配置文件
//在最后的plugins插件位置
plugins:[
.......
//默认的单页配置
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
chunks:["main"], //配置base的位置
}),
//添加的相应的配置
new HtmlWebpackPlugin({
filename: 'h0201.html', //根路径下的文件名
template: 'h0201.html', //根路径下的文件模板来源
inject: true,
chunks:["j0201"], //配置base的位置
}),
new HtmlWebpackPlugin({
filename: 'h0202.html', //根路径下的文件名
template: 'h0202.html', //根路径下的文件模板来源
inject: true,
chunks:["j0202"], //配置base的位置
}),
new FriendlyErrorsPlugin()
]
- src文件夹
src文件放置了所有的资源文件（.js . vue等）
举例分析相应的联系
【main.js和App.vue和index.html】
//1. 通过webpack.dev.conf.js配置，我们已经知道index.html和main绑定
//2. 那到什么地方去找main文件呢？有一个老程序员知道的定律，一般开始的页面的接口都是在src下面的main.js中
//3. 找到main.js
import Vue from 'vue'
import App from './App' //3. 这里说明App在当前文件夹下的App.vue（默认隐藏vue文件的后缀）
/* eslint-disable no-new */
new Vue({
el: '#app', // 1.绑定了id为app的元素
render: h => h(App) //2.默认语法，寻找App
})
//4. 找到当前文件下的App.vue文件。App.vue文件分三部分
//4-1 html样式放置位置
<template> //html样式
<div id="app">
<hello></hello> //注意这里有一个hello，不是默认标签，就在脚本位置寻找对应的模板
</div>
</template>
//4-2 脚本放置位置
<script>
import Hello from './components/Hello' //告诉我们在当前文件夹下的components下的Hello.vue文件中
export default {
components: {
Hello
}
}
</script>
//4-2 当前页面样式放置位置
<style> //<style scoped>表示只对当前页面有效的css
......
</style>
