webpack 使用流程

Posted 2020-09-24 Booo

webpack
loader 读文件的

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

--------------------------------------
开发环境
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  demo

项目名称
项目描述
作者
是否用sass
5、进入项目文件夹
6、下载依赖项（各种loader）

　　npm install
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文件

 

----------------------------------

vue 相关的UI-----饿了吗

　　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‘
　　},