首页 > 代码库 > webpack 使用流程

webpack 使用流程


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

webpack 使用流程