Vue安装流程

配置webpack

1.1 新建一个工程文件夹,CMD进入该文件夹

1.2 安装webpack

    npm init -y

    npm install webpack webpack-cli webpack-dev-server --save-dev

 

1.3 想要支持ES6 需要安装babel依赖

      babel:是一个JS编译平台;

作用:

     让浏览器支持下一代JS(ES6,ES7...)代码,

     支持使用基于js进行语言拓展,如React的JSX

安装babel

指令:

npm install --save-dev babel-loader babel-core babel-preset-es2015

解释:

babel-core:babel核心包

babel-loader:abel的loader包

babel-preset-es2015:解析ES6的包

 

1.4 创建webpack.config.js文件如下:

// 引入node的path模块

const path = require("path");

// 指定返回接口的集合

module.exports = {

mode:"production",

    // production:生产模式

    // development:开发模式

    // none:无模式

   // 打包的入口文件

   entry:"./js/index.js",

   // 打包输出文件地址和文件名

   output:{

     path:path.resolve(__dirname,"dist"),

     filename:"main.js"

   },

   // 模块设置

   module:{

     // 模块规则

     rules:[

        {

         test:/\.js?$/,

         exclude:[

           path.resolve(__dirname,"node_modules")

         ],

         loader:"babel-loader",

         options:{

         presets:["es2015"]

         }

        }

     ]

   }

}

创建js文件夹

在js文件夹中创建index.js内容为：

console.log("我是入口JS文件");

3.5 执行：

npx webpack

如果报错:

ERROR in ./js/index.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):

Error: Cannot find module '@babel/core'

分别执行：

npm i babel-loader@7.1.5 -D

npx webpack

3.6新建index.html

引入打包成功的main.js文件

<script type="text/javascript" src="dist/main.js"></script> 

3.6 启动webpack服务器

  3.6.1:

  在webapck.config.js的输出对象output中添加属性

  publicPath:"/public/"

  将index.html内容修改为

  <script type="text/javascript" src="./public/main.js"></script>

  3.6.2:

  执行:

  node_modules/.bin/webpack-dev-server

  执行成功说明webpack提供的本地服务器启动成功

  此时可以在浏览器中访问

http://localhost:8080

  这种方法,文件路径不好操纵

  3.6.3:

  修改:

  package.json

  将"main": "index.js"

  修改为:

  "main": "webpack.config.js"

  修改：

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  为:

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "start:dev":"webpack-dev-server"

  }"

 

  CMD执行:

  ctrl + c 退出服务器

  再执行:

  npm run start:dev