vue+webpack 项目示例（第一部分）_webpack 取vue 实例-优快云博客

本文链接：https://blog.youkuaiyun.com/cvper/article/details/79671983

项目没有使用vue-cli创建目录，自己搭建，我们先学会如何创建整个项目；

1.先随便找个地方创建一个文件夹，起个名字吧：vue-webpack ;

使用npm init 先创建一个packge.json ;

2. 局部安装webpack（注意，请使用webpack3.0版本，不要用最新的4.0版本），vue ，vue-loader;

3.第二步的时候出现了warn 警告信息，那么来处理一下，

因为缺少一些东西，所以下载一下css-loader和vue-template-compiler；

4.在项目目录下新建src文件夹，在src中新建 app.vue ,app.vue中写入内容：

 
  < 
  template 
  > 
 
   <div id="myapp">{{ 
  myapp 
  }} 
  </ 
  div 
  > 
 
  </ 
  template 
  > 
 
  < 
  script 
  > 
 
  export 
  default { 
 
  data(){ 
 
  return{ 
 
   myapp: 
  "这是我的第一个vue项目示例" 
 
   } 
 
   } 
 
   } 
 
  </ 
  script 
  > 
 
  < 
  style 
  > 
 
  #myapp 
  { 
  font-size:30px; color:green; 
  } 
 
  </ 
  style 
  >

5.上面的项目是没法直接运行的，我们继续在项目目录vue-webpack下创建：webpack.config.js文件

 
  const 
  path 
  = 
  require( 
  "path"); 
 
  module. 
  exports={ 
 
   entry: 
  path. 
  join(__dirname, 
  "src/index.js"), 
 
   output:{ 
 
   filename: 
  "bundle.js", 
 
   path: 
  path. 
  join(__dirname, 
  "dist") 
 
   }, 
 
   module:{ 
 
   rules:[ 
 
   { 
 
   test: 
  / 
  . 
  vue 
  $ 
  /, 
 
   loader: 
  "vue-loader" 
 
   } 
 
   ] 
 
   } 
 
   }

6.在 src目录下创建index.js 文件；

 
  import 
  Vue 
  from 
  "vue" 
 
  import 
  App 
  from 
  './app.vue' 
 
  const 
  root 
  =document. 
  createElement( 
  "div"); 
 
   document.body. 
  appendChild(root); 
 
  new 
  Vue({ 
 
  render:(h) 
  => 
  h( 
  App) 
 
   }). 
  $mount(root);

7.修改我们一开始创建的package.json 文件：增加 “build”：“webpack。。。。省略”（如下）

   { 
 
  "name": 
  "vue-webpack", 
 
  "version": 
  "1.0.0", 
 
  "description": 
  "", 
 
  "main": 
  " 
  \u001b 
  [A 
  \u001b 
  [B", 
 
  "scripts": { 
 
  "test": 
  "echo  
  \" 
  Error: no test specified 
  \" 
   && exit 1", 
 
  "build": 
  "webpack --config webpack.config.js" 
 
   }, 
 
  "author": 
  "", 
 
  "license": 
  "ISC", 
 
  "dependencies": { 
 
  "css-loader": 
  "^0.28.11", 
 
  "vue": 
  "^2.5.16", 
 
  "vue-loader": 
  "^14.2.1", 
 
  "vue-template-compiler": 
  "^2.5.16", 
 
  "webpack": 
  "^3.0.0" 
 
   } 
 
   }

8.全部完成之后目录结构如下：

9.我们使用命令： npm run build 即可；（注意，下载webpack的时候注意版本，4.0版本的webpack-cli已经分离出去

，我们这里使用3.0.0版本）

10.命令执行之后，目录多出来一个dist 文件夹，里面还有我们的目标文件 bundle.js

11,接下来我们测试运行一下就可以了，

测试步骤：在dist文件夹下创建index.html文件，引入我们的bundle.js文件：

   <!doctype html> 
 

   < 
  html> 
 

   < 
  head> 
 
 
  < 
  meta 
  > 
 
 
  < 
  title 
  >this is test file 
  </ 
  title 
  > 
 

   </ 
  head> 
 

   < 
  body> 
 
 
  < 
  script 
    
  src 
  = 
  "bundle.js" 
  > 
  < 
  / 
  script 
  > 
 

   </ 
  body> 
 

   </ 
  html> 
 