webpack 使用流程

 

webpack
loader 读文件的

脚手架
自动化的小工具，帮咱们把项目的架子搭起来

webpack
--------------------------------------
开发环境
nodejs
npm
webpack
vue的组件都是通过.vue文件来实现，这些文件无法被浏览器解析的，需要webpack
vue-cli 脚手架
用来生成vue的模板（架子），相当于按照设计图搭建好房子的架子。
---------------------------------
开发步骤
1、下载node
2、下载webpack
npm install webpack -g
3、安装脚手架
npm install vue-cli -g
4、根据模板创建项目
simple 完全没用
webpack-simple 用他
webpack 有校验
browserify-simple
browserify

找到文件夹进去
vue init <模板的名称> 工程的名称（不用用中文）
vue init webpack-simple[#1.0] webpack-simple-demo

项目名称
项目描述
作者
是否用sass
5、进入项目文件夹
6、npm install
下载依赖项（各种loader）
7、安装路由和交互
npm install vue-router vue-resource --save
8、启动项目
npm run dev
------------------------------
编写项目
App.vue 主文件

所有的html写在 template
模板里面必须有一个根文件

所有的js
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
}
}
</script>
数据必须放在函数的返回值中
-----------------------------------
组件的写法
1、创建文件 .vue结尾
2、写文件
<template>
写html
</template>

<script>
export default {
data(){
return {}
},
methods:{

}

}
</script>

<style>
写样式
</style>
3、在主组件中引用
a)import XXX from ‘上面创建的文件的路径’
b)挂在js里

data(){

},
components:{XXX}
c)在template里面用
<XXX></XXX>
----------------------------
路由
1、修改文件
找到webpack.config.js
看有没有
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}

如果没有
resolve: {
alias: {
'vue':'vue/dist/vue.js'
}
}
2、再准备一些组件
3、修改main.js(入口文件)
a）引入路由文件
import VueRouter from 'vue-router'
b)开启路由
Vue.use(VueRouter);
c)写模板，或者是引入模板
const First={
template:'<div>我是第一个模板</div>'
};
import second from './component/second.vue';
d)配置路由
const router=new VueRouter({
routes:[
{path:'/first',component:First},
{path:'/second',component:second}
]
})
e)在vue中把路由挂载上
new Vue({
router,
el: '#app',
render: h => h(App)
})
f)在主模板中写路由的按钮和展示
<router-link to="/first">111</router-link>
<router-link to="/second">111</router-link>
<router-view></router-view>
项目打包
npm run build
会生成一个文件dist文件
别人拿到代码
npm install
npm run dev
上线
上线要用dist文件

----------------------------------
UI
别人提供的已经写好的东西
目的：
为了提高开发效率
原则：粘贴复制

----------------------------------
vue 相关的
饿了吗
element-ui pc http://element.eleme.io
mint-ui 移动端 http://mint-ui.github.io

--------------------------------
安装步骤：
需要一个css和一个js

1、npm i element-ui -S

i install
-S --save
-D --save-dev
2、引入文件
在main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI);
3、npm run dev
报错
原因：loader不全，无法解析文件
css-loader
style-loader
file-loader
cnpm i css-loader --save
cnpm i style-loader --save
cnpm i file-loader --save

cnpm i css-loader style-loader file-loader --save

在webpack.config.js
{
test: /.css$/,
loader: 'style-loader!css-loader'
},
{
test: /.(eot|svg|ttf|woff|woff2)(?S*)?$/,
loader: 'file-loader'
},

----------------------
node
git
通过下软件

基于node
grunt
npm install -g grunt-cli
grunt
gulp
npm install -g gulp-cli
vue-cli
npm install -g vue-cli
生成模板