欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

手动搭建vue工程的环境

程序员文章站 2022-08-14 23:36:39
手动搭建vue工程的环境 一.webpack基础配置 1.确保安装了最新版本的node和npm。 2.首先,创建一个目录,如demo,使用npm初始化配置(如果npm太慢,可...

手动搭建vue工程的环境

一.webpack基础配置
1.确保安装了最新版本的node和npm。
2.首先,创建一个目录,如demo,使用npm初始化配置(如果npm太慢,可以使用cnpm):

npm init

执行后,会出现一系列选项,可以按回车键快速确认,完成后,在demo目录下会生成package.json文件
3.把webpack包安装到node_modules目录中

npm install webpack --save-dev

安装成功后,package.json中多了一项配置,并且demo目录下会有node_modules文件夹

"devdependencies": {
    "webpack": "^4.25.1",
  }

4.然后安装webpack-dev-server,他可以提供很多服务,比如启动一个服务器,热更新,接口代理等,同样在本地局部安装:

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

安装完成后,package.json中内容:

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "isc",
  "devdependencies": {
    "webpack": "^4.25.1",
    "webpack-dev-server": "^3.1.10"
  }
}

5.在demo目录下创建webpack.config,js文件:

var config = {
}
module.exports = config;

注:这里的module.exports = config,相当于export default config。因为没有安装es6编译插件,不能用es6语法,否则会报错。
6.之后在package.json的scripts里添加一个快速启动webpack-dev-server服务的脚本:

"scripts": {
    "test": "echo \"error: no test specified\" && exit 1",
    "dev":"webpack-dev-server --open --config webpack.config.js"
  }

当运行npm run dev 命令时,就会执行webpack-dev-server --open --config webpack.config.js命令。其中–config是指向webpack-dev-server读取配置文件路径,–open会在执行命令时自动在打开网页,默认地址是127.0.0.1:8080,不过ip和端口都可以配置,比如:

 "dev":"webpack-dev-server --host 172.172.172.1 --port 8082  --open --config webpack.config.js"

这样访问地址就改为172.172.172.1:8082。一般在局域网下,需要额让其他同事访问可以这样配置,否则用localhost就可以。
7.webpack配置中最重要也是必选两项是入口和出口。入口的作用是告诉webpack从哪里开始寻找依赖,并且编译,出口则用来配置编译后的文件存储位置和文件名。在demo目录下新建一个空的main.js作为入口的文件,然后在webpack.config.js中进行入口和输出的配置:

var path = require('path');
var config = {
    entry:{
        main:'./main'
    },
    output:{
        path:path.join(__dirname,'./dist'),
        publicpath:'/dist/',
        filename:'main.js'
    }
}
module.exports = config;

entry中的main就是配置的单入口,webpack会从main.js文件开始工作。output中path选项用来存放打包后文件的输出目录,是必填项。publicpath指定资源文件引用的目录。filename用于指定输出文件的名称。因此,这里配置的output意为打包后的文件会存储在demo/dist/main.js文件,只要在html引用他就可以了。
8.在demo目录下,新建index.html作为spa入口:




hello world

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

在终端执行下面命令,浏览器就会自动打开页面:

npm run dev

这些内容只是基础配置,往后会逐渐完善配置文件,静待更新