今天看啥
    热点:

      天发国际娱乐官网:他在接受采访时表示,今年的动作较去年发生了一些变化,所以成功率也出现了一定的波动,因此会更加注重完成的效果。

      webpack+vue2构建vue项目骨架的方法,webpackvue2


      前端项目打包工具webpack与前端开发框架vue,算是现在前后端分离后非常流行的技术了,今天主要讲的是使用webpack和vue2构建一个前后端分离项目的基本骨架。虽然使用vue-cli脚手架可以帮我们搭建好一个项目骨架,但是了解原理我觉得还是很重要的,所以这篇文章主要就写webpack与vue构建一个基础项目。前提是已经安装了nodejs。

      整个项目需要通过npm安装的依赖

      css : style-loader、css-loader、sass-loader、node-sass

       js:babel-core 、babel-loader、babel-preset-es2015

      webpack:webpack、webpack-dev-server

       vue:vuer 、vue-loade、vue-html-loader、vue-template-compiler

      新建一个项目的目录

      我们首先需要新建一个目录myApp用来放我们的项目,在终端里面进入这个项目,然后开始初始化项目。

      初始化项目

      $ npm init 

      初始化项目的时候,如果没有特别需要,直接按“回车键”就可以。项目初始化完成后,就会生成一个packge.json文件主要存放项目依赖目录和配置项目启动命令。

      安装依赖

      $ npm i style-loader --D 

      使用npm安装依赖的时候,我们会在最后加上“--D”,因为加“--D”后会在packge.json里面留上记录。如果我们将项目在其他系统打开时,会发现开发的时候通过npm安装的依赖不能用了,这是因为存在系统兼容性。而如果开发项目的时候安装依赖加上“--D”,项目里面的node_modules就不需要拷贝过去,而打开项目前,我们只需要通过npm安装所有依赖就可以了。

      $ npm i 

      配置webpack.config.js文件

      webpack所有的配置都在webpack.config.js文件里面,所以初始化项目后,我们需要新建一个webpack.config.js文件然后配置。由于上次已经专门写过webpack的基本配置,这儿就不重复了,直接贴上我的配置代码:

      module.exports = {
      
       entry: './src/main.js',
      
       output:{
      
        path: __dirname + '/dist/',
      
        filename: 'bundle.js'
      
       },
      
       devtool:'source-map',
      
       devServer:{
      
        // 主要改变项目的根目录
      
        contentBase: __dirname + '/dist/',
      
        port:8080,
      
        inline:true
      
       },
      
       module:{
      
        loaders:[
      
         {test:/\.css$/,loader :'style-loader!css-loader'},
      
         {test:/\.js$/, loader:'babel-loader',exclude:/node_modules/},
      
         { test: /\.vue$/, loader: 'vue-loader' }
      
        ]
      
       },
      
       //vue文件想要解析必须要要加上这句才能成功
      
       resolve: { alias: { 'vue': 'vue/dist/vue.js' } }
      
      } 
      
      

      配置package.json

      package.json里面需要配置的主要时项目启动命令,一个开发模式的start和打包项目build。

      启动项目

      $ npm start 

      打包项目

      $ npm run build 

      整个项目的目录

      src:我们开发的源文件都放在这个目录里面

      components:用来放所有的组件

      styles:存放所有的样式文件

      utils:存放所有需要自己写的方法函数

      app.vue:所有的vue文件的入口文件

      main.js:整个项目的js入口文件

      index.html:这个文件可以放在真个项目的根目录myApp里面,也可以放在webpack打包的生成的目录dist里面,如果是放在根目录则webpack.config.js里面的contentBase: __dirname ,如果在dist里面则contentBase: __dirname + '/dist/'。主要改变项目的服务根目录的位置,就是我们localhos:8080打开时浏览器显示的目录。(经过测试放在打包生成的dist目录会好些,主要在开发模式可以实现实时更新。这个可能不太准,后期再测试后进行修改)

      index.html文件代码

      <!DOCTYPE html>
      <html lang="en">
      <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>webpack+vue</title>
      </head>
      <body>
       <div id="app"></div>
       <script src="./bundle.js"></script>
      </body>
      </html> 
      

      main.js文件代码

      //引入vue框架<br>
      //import是es6的写法,其实和var Vue = require('vue')是相同的意义<br>import Vue from 'vue';<br>
      //引入App.vue文件,这个文件也是vue所有组件的入口,我们的项目就是将这个文件追加到index.html文件里面
      import App from './App.vue';
      new Vue({
       el:'#app',
       components: {App},<br>//主要目点就是将App追加到“#app”里面去
       render: h => h(App)
      }) 
      App.vue文件代码
      <template>
        <div>Hello VueJS!</div>  
      </template>
      <script>
       export default{
         name:"app"
        }
      </script> 
      

      到这儿整个项目基本上就完成了基本的结构,在浏览器输入:localhost:8080,就可以看到显示:

      以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

      www.1click-soft.comtruehttp://www.1click-soft.com/Javascript/1281043.htmlTechArticlewebpack+vue2构建vue项目骨架的方法,webpackvue2 前端项目打包工具webpack与前端开发框架vue,算是现在前后端分离后非常流行的技术了,今天主要...

      相关文章

      相关搜索: vue2 webpack 项目

      帮客评论

      视觉看点
      百度 360 搜狗